Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Stephanie Roberts
Stephanie Roberts
16,757 Points

Content moves slightly when I resize browser

I have created a site and have used media queries and % to make it responsive, however when I resize my browser right down to the size of an android device and gradually make the browser bigger, things start to move slightly. Can someone tell me why this is happening please?

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Stephanie,

Can you explain what you mean by moving slightly?
Is the layout moving in a way that's making it look all wrong? Or does it still hold the look you want and things are moving to one side a little?

If you post your code we can take a look for you.

Here is a link to explain how to use Markdown to post your code How to post code

3 Answers

Don Howard
Don Howard
5,827 Points
Don Howard
Don Howard
5,827 Points

Hi Stephanie,

That could be caused by a number of different issues. The first place I would look is at the scroll bars. When you resize your window the content may be moving because the scrollbars are appearing to accommodate content, or disappearing because they are no longer needed. If that is the case it indicates a need for an adjustment to media queries or content sizing.

Hope that helps, Don

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

The text seems to stay the same but the images move slightly to the left.

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points 
* Phones to tablets*/ 

@media only screen and (min-width: 1px) and (max-width: 768px)  {
    .main-nav {
        margin-top: 62px;
    }

    .main-nav li {
        margin-top: 12px;
        background-color:#EBE6E8;
        border-radius: 10px;
    }

    .main-logo img {
        margin-left: 40%;
    }


    .grid-4 img {
        margin-left: 36%;
        margin-top: 6%;

    }


.background h1 {
    padding-top: 60px;
    text-align: left;
    margin-left: 6%;

}

.background {
    background-color: #F8F6F5;


}

.background p {
    text-align: left;

}

/* CONTACT */

.contact_background {
    width: 90%;
    height: 650px;
}

.contact_background h1 {
    font-size: 26px;
}

.contact_details {
    float: left;
    margin-top: 34%;

}

.main-footer {}

}

/* Tablets to Desktops */

@media only screen and (min-width: 769px) {

    body {
        padding-top: 75px;
    }

    .main-header {
    padding-top: 10px;
    padding-bottom: 10px; 
}
    .main-header {
        position: fixed;
        top: 0;
        width: 100%;
    }
    .main-nav {
        text-align: right;
        margin-top: 38px;
    }
    .main-nav li {
        margin-top: 6px;
        margin-left: 10px;
        display: inline-block;
    }
    .main-banner {
        text-align: center;
        padding: 50px 0px;
        margin-bottom: 20px;
    }

    .background {
        background-color: #F8F6F5;
        line-height: 1.8em;
        margin-top: 50px;
        margin-bottom: 20px;
        padding-top: 20px;
        width: 1006px;
        margin-right: 32px; 
    }

    .background h1, p {
        margin-left: 30px;
        padding-bottom: 10px;
        padding-top: 10px;
        -webkit-font-smoothing:antialiased;
    }

    .main-footer img {
    margin-bottom: -84px;
    }

    .map {
        margin-bottom: 30px;
        margin-top: 5px;
        margin-left: 38px;
    }




    /* Imagery
    ================================ */
    .photo {
        width: 250px;
        height: 250px;
        border: 5px solid #fff;
        float: right;
        margin-right: 20px;
        margin-top: 26px;
    }

}