Jump to content

negative margin in resized browser window

bartonlewis

By bartonlewis
in CSS

 Share

Recommended Posts

bartonlewis Newbie

bartonlewis

Posted
Posted

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

Link to comment
Share on other sites
Funce Invested Member

Funce

Posted
Posted

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

Link to comment
Share on other sites
bartonlewis Newbie

bartonlewis

Posted
  • Author
Posted

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.  

Link to comment
Share on other sites
Funce Invested Member

Funce

Posted
Posted
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.

Link to comment
Share on other sites
Funce Invested Member

Funce

Posted
Posted

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
Link to comment
Share on other sites
Funce Invested Member

Funce

Posted
Posted (edited)

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
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted
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
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...