Jump to content
bartonlewis

negative margin in resized browser window

Recommended Posts

I have a problem with a margin when resizing the browser down to 480px.  In the  screen shot named "browser2" below, the  1st 3 of 5 links there are showing.   When resizing the browser down to 480px, the 1st link ("home") is falling off the page to the left.  I can't figure out why.  The image "browser1" shows the problem.  The image "browser2" shows the same html at 1536px with the 1st 3 links showing.  Can anyone help?  Thanks.

<!DOCTYPE HTML>
<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <meta charset="UTF-8">
<title>Barton's website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>

html {
    background-color: white;
    }
body {
    width: auto;
    margin: 0 auto 0;
    }
.parallax { 
    /* The image used */
    background-image: url("img_bckgd_bio.jpg");
 
    /* Set a specific height */
    height: auto; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
}
h2 {
    font-family: "europa",sans-serif;
    color: black;
    text-align: center;
    font-size: 250%;
    font-weight: 600;
    letter-spacing: 2px;
    padding-top: 10%;
    margin-bottom: 10%;
    }
body p {
    font-family: "europa",sans-serif;
    text-align: left;
    font-size: 170%;
    font-weight: 600;
    color: black;
    line-height: 150%;
    }
.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
     padding: 0 5% 5%;
    border-top: rgb(180, 37, 37) solid 2px;
    }
.flex1  {
    width: 25%;  
    margin-top: 5%;
    }
.flex1 p {
    font-family: "europa",sans-serif;
    text-align: center;
    font-size: 150%;   
    padding-bottom: 10%;
     }
.flex2 {
    width: 50%;   
    margin-top: 5%;
    }
.flex2 p {
    padding-bottom: 10%;
     }
a {
   font-family: "europa",sans-serif;
    text-align: left;
    text-decoration: none;
    font-size: 110%;
    color: black;
    }
a:hover {
    color: blue;
    text-decoration: underline;
}
footer {
    background: #827e90;
    height: 25%;
    }
footer p {
    padding: 5%;
    font-family: "europa",sans-serif;
    font-size: 100%;
    letter-spacing: .8px;
    color: white;
    }
.flex-container_footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
.flex-container_footer>div {
    margin: 0px 5%;
}
.fa {
    padding: 2%;
    font-size: ;
    width: ;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
.copyright p {
    font-family: "europa",sans-serif;
    color: black;
    font-size: 110%;
    letter-spacing: .8px;
    line-height: 135%;
    font-weight: 500; 
    padding: 10% 0;
    }
/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}
/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    background: #3B5998;
    color: white;
}   
    /* Instagram */
.fa-instagram {
    background: #3B5998;
    color: white;
}
    
@media screen and (max-width: 1366px) {
h2 {
    font-size: 
    }
.flex2 {
    font-size:     
    }

@media screen and (max-width: 1024px) {
h2 {
    font-size: 200%;
    }
.flex2 p {
    font-size: 150%;    
    }        

@media screen and (max-width: 768px) {
h2 {
    font-size: 175%;
    }
.flex1 p {
     font-size: 125%;   
     }
.flex2 p {
    font-size: 125%;    
    }    

@media screen and (max-width: 480px) {
h2 {
    font-size: 155%;
    margin-bottom: 5%;
    }
.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5% 5%;
    border: none;
    }
.flex1 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 5% 5% 0;
      }
.flex1 p {
     font-size: 105%; 
    margin: 0 8% 0;
     }
.flex2 {
    width: 100%;
    border-top: rgb(180, 37, 37) solid 2px;
    }
.flex2 p {
    font-size: 105%;
    padding-top: 6%;
    }    
    }
    
</style>
</head>
<body>
<header>
    </header>
    <div class="parallax">
    <div>
    <h2>Barton Lewis - Bio</h2>
    </div>
  <section class="flex-container">
    <div class="flex1">
        <p><a href="index.html" title="home">home</a></p>
        <p><a href="bartons_film_site_works.html" title="works">works</a></p>
        <p><a href="bartons_film_site_bio.html" title="bio">bio</a></p>
        <p><a href="bartons_film_site_cv.html" title="c/v">c/v</a></p>        
        <p><a href="bartons_film_site_contact.html" title="contact">contact</a></p>
    </div>
    <div class="flex2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel diam at justo maximus facilisis vel auctor sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer purus arcu, pharetra quis libero sit amet, luctus bibendum metus. Aliquam orci metus, consequat nec malesuada in, condimentum ac nisi. Duis vulputate sem lacus. Fusce justo lorem, scelerisque sit amet suscipit sed, sodales at est. Sed quis ante vitae tellus ultricies ultricies quis nec lacus. Aliquam ac neque vitae nulla eleifend egestas eu at urna. Morbi metus velit, tempus eget ornare at, aliquet id nisl.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel diam at justo maximus facilisis vel auctor sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer purus arcu, pharetra quis libero sit amet, luctus bibendum metus. Aliquam orci metus, consequat nec malesuada in, condimentum ac nisi. Duis vulputate sem lacus. Fusce justo lorem, scelerisque sit amet suscipit sed, sodales at est. Sed quis ante vitae tellus ultricies ultricies quis nec lacus. Aliquam ac neque vitae nulla eleifend egestas eu at urna. Morbi metus velit, tempus eget ornare at, aliquet id nisl.</p>
    </div>
    <div class="flex1">
        <p></p>
    </div>
</section>
        </div>
    <footer>
    <div class="flex-container_footer">
        <div class="copyright">
            <p>copyright © 2017 by Barton Lewis</p>
        </div>
        <div>
            <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a>
            <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a>
        </div>
    </div>
    </footer>
</body>
</html>

 

 

browser1.jpg

browser2.jpg

Share this post


Link to post
Share on other sites

Hi there Barton,

Are these snippets of your code? Some of the CSS braces aren't closed.

In any case, your issue lies in the positioning of your flexbox element

image.png.d4962c061437b656ea501a8b97883bdc.png

The content is centred around the centre of your flexbox, but the centre is actually... well not at the centre. You can correct this by changing the margins on this particular style.

page.html - line 207

.flex1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 5% 5% 0;
}

 

If you change the margin to:

margin: 5% auto 0;

That should solve your issue.

 

I'd recommend some reading into margins to understand why it works. https://www.w3schools.com/css/css_margin.asp

Share this post


Link to post
Share on other sites

You are missing some closing curly braces from your media queries.

Your have media queries opening brace then your style declarations regarding font sizes with open/closing braces, but no media query closing brace.

Share this post


Link to post
Share on other sites

Thanks to you both for noting the missing braces.

Thanks Funce for solving the problem, it worked.  It seems like the centre should be the centre - regardless of what margins you set - so I am not sure I am understanding this.  There appears to be some conflict with aligning items horizontally and setting left and right margins though.  

Share this post


Link to post
Share on other sites
1 minute ago, bartonlewis said:

Thanks to you both for noting the missing braces.

Thanks Funce for solving the problem, it worked.  It seems like the centre should be the centre - regardless of what margins you set - so I am not sure I am understanding this.  There appears to be some conflict with aligning items horizontally and setting left and right margins though.  

No worries Barton. Your container was off to the left. So your text (centred on the container) was off to the left as well. The margins just created equal spacing on both sides of the container which ends up centring the container and fixing the issue.

Share this post


Link to post
Share on other sites

Let's compare!

image.png.d4962c061437b656ea501a8b97883bdc.png

The blue area shows the container that your text is being centred off of. The orange area represents your margins.

Compare it with this

image.png.4a3e9ac8c85e198a467c4911aab7ffb5.png

And you can see the difference

  • Like 1

Share this post


Link to post
Share on other sites

You have set the width to 25%, it is centring to that width, it will align to the left, the overflow of width 25% and margins extends beyond the left edge, out of view.

  • Like 1

Share this post


Link to post
Share on other sites

I think what you need to do is when it is a single column set .flex1 width: to auto; remove margins from .flex1 and .flex1 p and use  flex:1 1 0; for paragraphs.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the explanations.  But in the resized window (at 480px), the width should still be 25%.  Is it because I have changed the flex-direction to column that that width no longer applies?

Share this post


Link to post
Share on other sites

The width still is 25%, 25% of its parent container. Just like before. Its just now the navigation is above the main content. Look at the Blue box in my pictures to see how big  the flexbox is.

Edited by Funce
  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, bartonlewis said:

Thanks for the explanations.  But in the resized window (at 480px), the width should still be 25%.  Is it because I have changed the flex-direction to column that that width no longer applies?

Unless you want the navigation to stack above each other as it was with two column layout then OK, the width can remain at 25%, but you need to change flex-direction: row; to flex-direction: column in media query to reflect this. IF Not, the problem is you are trying fit combined width of all navigation 100% of 480px, into now 25% width of 480px (120px reduced even more by using margins). That width is fine for a 2 column layout, but when the width begins to reduce to a single column for 480px not so much you will and have found. For a responsive layout for smaller devices all container widths usually become for non block elements width: 100% OR block elements width: auto; so they fill the total width available to them.

  • Like 1

Share this post


Link to post
Share on other sites

This is more logical responsive way to do this

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://use.typekit.net/qkv6kzb.js"></script>
        <script>try {
                Typekit.load({async: true});
            } catch (e) {
            }</script>
        <script src="https://use.typekit.net/qkv6kzb.js"></script>
        <script>try {
                Typekit.load({async: true});
            } catch (e) {
            }</script>
        <meta charset="UTF-8">
        <title>Barton's website</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <style>

            html {
                background-color: white;
            }
            body {
                width: auto;
                margin: 0 auto 0;
            }
            .parallax {
                /* The image used */
                background-image: url("img_bckgd_bio.jpg");

                /* Set a specific height */
                height: auto;

                /* Create the parallax scrolling effect */
                background-attachment: fixed;
                background-position: center;
                background-repeat: repeat;
                background-size: cover;
            }
            h2 {
                font-family: "europa",sans-serif;
                color: black;
                text-align: center;
                font-size: 250%;
                font-weight: 600;
                letter-spacing: 2px;
                padding-top: 10%;
                margin-bottom: 10%;
            }
            body p {
                font-family: "europa",sans-serif;
                text-align: left;
                font-size: 170%;
                font-weight: 600;
                color: black;
                line-height: 150%;
            }
            .flex-container {
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                justify-content: center;
                padding: 0 5% 5%;
                border-top: rgb(180, 37, 37) solid 2px;
            }
            .flex1  {
                width: 25%;
                margin-top: 5%;
            }
            .flex1 p {
                font-family: "europa",sans-serif;
                text-align: center;
                font-size: 150%;
                padding-bottom: 10%;
            }
            .flex2 {
                width: 50%;
                margin-top: 5%;
            }
            .flex2 p {
                padding-bottom: 10%;
            }
            a {
                font-family: "europa",sans-serif;
                text-align: left;
                text-decoration: none;
                font-size: 110%;
                color: black;
            }
            a:hover {
                color: blue;
                text-decoration: underline;
            }
            footer {
                background: #827e90;
                height: 25%;
            }
            footer p {
                padding: 5%;
                font-family: "europa",sans-serif;
                font-size: 100%;
                letter-spacing: .8px;
                color: white;
            }
            .flex-container_footer {
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .flex-container_footer>div {
                margin: 0px 5%;
            }
            .fa {
                padding: 2%;
                /*font-size: ;
                width: ; Don't know what going on here? never leave half finished'*/
                text-align: center;
                text-decoration: none;
                border-radius: 50%;
            }
            .copyright p {
                font-family: "europa",sans-serif;
                color: black;
                font-size: 110%;
                letter-spacing: .8px;
                line-height: 135%;
                font-weight: 500;
                padding: 10% 0;
            }
            /* Add a hover effect if you want */
            .fa:hover {
                opacity: 0.7;
            }
            /* Set a specific color for each brand */

            /* Facebook */
            .fa-facebook {
                background: #3B5998;
                color: white;
            }
            /* Instagram */
            .fa-instagram {
                background: #3B5998;
                color: white;
            }

            @media screen and (max-width: 1366px) {
                /*h2 {
                    font-size:
                    }
                .flex2 {
                    font-size:
                    } Don't know what going on here? never leave half finished'*/
            }
            @media screen and (max-width: 1024px) {
                h2 {
                    font-size: 200%;
                }
                .flex2 p {
                    font-size: 150%;
                }
            }
            @media screen and (max-width: 768px) {
                h2 {
                    font-size: 175%;
                }
                .flex1 p {
                    font-size: 125%;
                }
                .flex2 p {
                    font-size: 125%;
                }

                @media screen and (max-width: 480px) {
                    h2 {
                        font-size: 155%;
                        margin-bottom: 5%;
                    }
                    .flex-container {
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding: 0 5% 5%;
                        border: none;
                    }
                    .flex1 {
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;

                        /* margin: 5% 5% 0; removed by dsonesuk*/

                        width: auto; /*added by dsonesuk*/
                    }
                    .flex1 p {
                        font-size: 105%;
                        /*  margin: 0 8% 0; removed by dsonesuk*/
                        padding: 2px 2px 0; /*added by dsonesuk*/
                        flex: 1 1 auto;/*added by dsonesuk*/
                    }
                    .flex2 {
                        width: 100%;
                        border-top: rgb(180, 37, 37) solid 2px;
                    }
                    .flex2 p {
                        font-size: 105%;
                        padding-top: 6%;
                    }
                }

            </style>
        </head>
        <body>
            <header>
            </header>
            <div class="parallax">
                <div>
                    <h2>Barton Lewis - Bio</h2>
                </div>
                <section class="flex-container">
                    <div class="flex1">
                        <p><a href="index.html" title="home">home</a></p>
                        <p><a href="bartons_film_site_works.html" title="works">works</a></p>
                        <p><a href="bartons_film_site_bio.html" title="bio">bio</a></p>
                        <p><a href="bartons_film_site_cv.html" title="c/v">c/v</a></p>
                        <p><a href="bartons_film_site_contact.html" title="contact">contact</a></p>
                    </div>
                    <div class="flex2">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel diam at justo maximus facilisis vel auctor sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer purus arcu, pharetra quis libero sit amet, luctus bibendum metus. Aliquam orci metus, consequat nec malesuada in, condimentum ac nisi. Duis vulputate sem lacus. Fusce justo lorem, scelerisque sit amet suscipit sed, sodales at est. Sed quis ante vitae tellus ultricies ultricies quis nec lacus. Aliquam ac neque vitae nulla eleifend egestas eu at urna. Morbi metus velit, tempus eget ornare at, aliquet id nisl.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel diam at justo maximus facilisis vel auctor sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer purus arcu, pharetra quis libero sit amet, luctus bibendum metus. Aliquam orci metus, consequat nec malesuada in, condimentum ac nisi. Duis vulputate sem lacus. Fusce justo lorem, scelerisque sit amet suscipit sed, sodales at est. Sed quis ante vitae tellus ultricies ultricies quis nec lacus. Aliquam ac neque vitae nulla eleifend egestas eu at urna. Morbi metus velit, tempus eget ornare at, aliquet id nisl.</p>
                    </div>
                    <div class="flex1">
                        <p></p>
                    </div>
                </section>
            </div>
            <footer>
                <div class="flex-container_footer">
                    <div class="copyright">
                        <p>copyright © 2017 by Barton Lewis</p>
                    </div>
                    <div>
                        <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a>
                        <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a>
                    </div>
                </div>
            </footer>
        </body>
    </html>

 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for your editorial comments and changes and explanation.  This was a good workout for me.  I better understand flexbox behavior now.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×