Page with flexbox doesn't automatically update when adjusting screen resolution (needs to be refreshed) - solved

HTML & CSS
,
1

index.html (7.4 KB)

Hey there, again! :sweat_smile:

I’m working on a site with 3 sections. Each section must be 100% of the browser window.
Sections look like this…

1920×970 68.4 KB

1920×970 175 KB

1915×991 472 KB

Just a subsection of third section. Third section contains 5 subsections.

The first two sections work okay, even on smaller resolutions.
But page needs to refreshed first before the third section updates when adjusting resolutions.
To be honest, this is the first real site I am working on. And this is also my first time using flexbox. I used float before but for some reason, I wanna use flexbox this time.

Third section looks like this when resolution’s being adjusted.

1915×991 219 KB

And this is what it looks like when the page is refreshed.

1915×991 261 KB

I only know basic html and css so please excuse my poor coding. I often just use google when I need to do something. :sob:
So I would like to know what’s the reason behind this and how to fix it.

Thank you so much.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font:20pt verdana;
            }
            html, body, .section, .slide {
                /* Height and width fallback for older browsers. */
                min-height: 100%;
                min-width: 100%;
                
                /* Set the height to match that of the viewport. */
                min-height: 100vh;
                
                /* Set the width to match that of the viewport. */
                min-width: 100vw;
                
                /* Remove any browser-default margins. */
                margin: 0;
            }
            html {
                overflow: scroll;
                overflow-x: hidden;
            }
            ::-webkit-scrollbar {
                width: 0px;  /* remove scrollbar space */
                background: transparent;  /* optional: just make scrollbar invisible */
            }
            /* optional: show position indicator in red */
            ::-webkit-scrollbar-thumb {
                background: #FF0000;
            }
            /* CSS to fix script loading issues 
            body {
                display: none;
            }
            
            body[class*="fp-viewing-"] {
                display: block;
            }
            */
            * {
                box-sizing: border-box;
            }
            
            body {
                margin: 0;
            }
            
            .transparent-bg {
                position: static;
            }
            .wrap {
                max-width: 1060px;
                width: 96%;
                margin: 0 auto;
                position: relative;
            }
            p {
                margin: 0;
            }
            .flex-container {
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                min-height: 100vh;
                align-items: center;
                justify-content: center;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
            }
            .left-col {
                flex: 1;
                
            }
            .right-col {
                flex: 1;
                
            }
            /* stacks column */
            @media screen and (max-width: 1000px){
                .flex-container {
                    -webkit-flex-direction: column;
                    flex-direction: column;
                }
            }
        </style>
    </head>
    <body>
        <div class="section" style="background-color: #000000; background-image: url(img/home-bg.png); background-size: cover; background-repeat: no-repeat; background-position: center center; text-align: center; margin: auto;">
            <div>
                <h1 style="font-family: sans-serif; font-size: 60px; color: #ffffff; margin: auto;">Lorem Ipsum</h1>
                <p style="font-family: sans-serif; font-size: 24px; color: #ffffff; margin: auto; text-align: center;">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
            </div>
        </div>
        <div class="section" style="background-color: #ffffff;">
            <div>
                <h1 style="font-size: 40px; color: #2c2c2c; margin-bottom: 80px auto; text-align: center;">Lorem Ipsum</h1>
                <p style="font-size: 18px;  color: #2c2c2c; max-width: 850px; margin: 0 auto 50px auto; text-align: center;">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
                <p style="font-size: 18px;  color: #2c2c2c; max-width: 850px; margin: auto; text-align: center;">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
            </div>
        </div>
        <div class="section" style="background-color: #ffffff; background-image: url(img/section3-bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; text-align: center; margin: auto;">
            <div class="flex-container">
                <div class="left-col">
                    <h1 style="font-size: 55px; color: #ffffff; text-align: left;">Lorem Ipsum</h1>
                    <h2 style="font-size: 24px;">Lorem Ipsum</h2>
                    <p style="font-size: 18px;">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
                </div>
                <div class="right-col">
                    <img src="section3-img1.jpg"/>
                </div>
            </div>
            <div class="flex-container">
                <div class="left-col">
                    <img src="section3-img1.jpg"/>
                </div>
                <div class="right-col">
                    <h2 style="font-size: 24px;">Lorem Ipsum</h2>
                    <p style="font-size: 18px;">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
                </div>
            </div>
        </div>
    </body>
</html>
2

It’s okay now. Seems like I fixed it.

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

Missed this code. :sweat_smile:
@PaulOB, you gave me an idea on your answer in this forum post. Thank you!

3

Glad you sorted it :slight_smile:

Just looking at the code above I see a mistake here.

    /* Height and width fallback for older browsers. */
                min-height: 100%;

It is not possible to base a percentage height on an element that is using min-height so your .section will not inherit any height at all in browsers that don’t understand vh units.

To inherit height into .section you would need this structure.

html,body{
height: 100%;
}
.section{min-height:100%;}

Only a fixed height can be used as a basis for a min-height percentage. (Of course that means that you can’t use any percentage heights within .section as they will also default to auto height.)

Note that when you use the Chrome developer tools you will need to click refresh if you change between resolutions using the toggle device toolbar. This is just the toolbar function and not an indication that you would need to do the same in a device.

I would suggest that you don’t use the device toggle toolbar but simply resize the normal desktop viewport manually and then you will instantly see if there are re-flow problems.

I only use the device toolbar for checking on specific devices (e.g. iphone and android variations bearing in mind these only emulate the basic appearance of the device and not its real behaviour, You need a real simulator to test exactly like the ios simulator that comes with xcode.)

3 Likes
4

I’ll keep this in mind. :blush:

Oh, I didn’t know this. I used to resize the browser when I was first learning responsive web design but the one who taught me html/css said that I should be using the device toggle toolbar which I didn’t know by that time.

Thank you so much for this! :blush:

1 Like
5

Yes its fine for testing specific devices and you should check with it frequently but just remember to refresh when you switch to each device :slight_smile:

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.