htmlcssstatic-pages

HTML CSS static site pages display at different sizes


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,


Solution

  • 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">