Html Question posted in
Some basic documentation can be found here.

Html – Width calculation in responsive web site

I am working on Project Landing Page of freecodecamp site. Following is my code

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    background-color: #eee;
    font-family: 'Lato', sans-serif;
    
    border: 1px solid black;
}


main {
    width: 80%;
    margin: auto;
    padding-top: 4rem;
}




#features {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 28%;
    margin-top: 5%;
}

#video {
    margin-left: 30%;
    margin-top: 5%;
}

footer {
    background-color: rgba(0,0,0, 0.1);
    text-align: end;
    width: 950px;
    margin: 2em auto 0 auto;
    padding: 1em;
}

footer > a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    margin: 0.5em;
}

footer > p {
    margin-top: 0.2em;
    font-size: 0.9em;
}

@media screen and (max-width: 952px) {
    footer {
        width: auto;
    }

    
}
    <main>

          <section id="features">
            <div>
                <h2>Premium Materials</h2>
                <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                <br><br>
            </div>

            

            <div>
                <h2>Fast Shipping</h2>
                <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
                <br><br>
            </div>


            <div>
                <h2>Quality Assurance</h2>
                <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                <br><br>
            </div>

          </section>

          <section>
            <iframe width="560" id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?si=6TmQlZHbZ_rJsacf&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          </section>

         
    </main>

    <footer>

        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Contact</a>

        <p>Copyright 2016, Original Trombones</p>
    </footer>

Now, I have to make this site responsive. So using dev tools, I change the viewport size. If I look at the footer element, I get following parameters in Opera browser when I set viewport size to 956px

viewport = 956px
footer width = 950px
body border = 1 + 1 = 2px
body width = 941.6px
footer margin-right = -10px

And I also get a horizontal scroll bar at this viewport width. Now, for the same viewport width, I get following parameters in Chrome browser

viewport = 956px
footer width = 950px
body border = 1 + 1 = 2px
body width = 939.2px
footer margin-right = -12.4px

And again a horizontal scroll bar. Now, my question is how do these numbers add up ? If there is a horizontal scroll bar, viewport width should be less than footer width since footer is overflowing body border. I am confused.

Tags:

2

Answers


  1. 0

    I am not sure if I got your question correct, but if you check the margin-left you have in your code, it is pushing the video to the side and since you have a fixed width for your video frame, this makes the content grow and causes some issues on the size of your container.
    If you can provide more information on your issue or even a visual clue of the expected result it could help to get a more accurate answer.

    Login or Signup to reply.
  2. 0

    Box-sizing ensures elements’ width and height contain padding and border, while body borders have a ‘1px’ solid black border and ‘2px’ left and right borders. Margin values based upon browser processing are applied to determine the total width of the page content, which involves the viewport width of 956 pixels, body width of 954 pixels, and footer width of 950 pixels. The text describes the behavior of two browsers, Opera and Chrome, when calculating the body width and footer width, respectively. Margin values depending on browser handling are used to calculate the total width of the page content, which includes the viewport width of 956 pixels, body width of 954 pixels, and footer width of 950 pixels.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search