1

I am relative new, have built some static web pages but not an expert. I apologize if this has been answered else where, I am not sure what the error I am encountering would be called and have tried to search for an answer already and have not been successful. Please point me to another answer if an answer to this already exists.

For the project, I am building a static website for a school project and noticed that the html/css pages are displaying at different sizes (almost seems as if there was zoom effect). After looking at the code through the inspector I noticed that on the index.html page displays with a width of: 1236px and the other pages display with width of: 1350px in the same view port. Not sure how to to resolve this. Below is the link to the code on github. Again apologies if there is a better way to upload the code here, this is my first post on this forum.

https://github.com/teoherman/repice-site

Thanks in advance,

manu paul
  • 35
  • 1
  • 8
Teo Herman
  • 43
  • 5
  • 1
    We don't like external links here on SO. Instead, post ONLY the relevant code in your post. Preferably, use [Stack Snippets](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/). – Bram Vanroy Oct 17 '18 at 11:09
  • Remove the viewports in the both the `CSS` and the `HTML` code. – Simon Jensen Oct 17 '18 at 11:09
  • @BramVanroy will look into how to do this in the future, however I am not sure where specifically the problem is. – Teo Herman Oct 17 '18 at 11:13
  • @SimonJensen could you be a bit more specific please? – Teo Herman Oct 17 '18 at 11:14

2 Answers2

2

The issue is the fifth line in your index.html, or rather the lack thereof on your other pages. It is a good idea to always have a meta tag indicating viewport information.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Add this line into the head of your other pages. Note that you may want to keep most meta-tags in your <head> identical over different pages of one website. Most notably, these three:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
0

When I started I use Bootstrap for most of my school project. It help displaying pages in different screen sizes and there are many sample codes that you could use. Hope this might help you.

Cedric Miraflor
  • 61
  • 6