How to stop the header from stretching across a wide screen

  • Resolved dfwmax

    (@dfwmax)


    11 years, 1 month ago

    I used the following code I found on this forum to prevent my website from stretching across when viewed on wide screens. 

    /* Restrict Site Size to 1200px Wide */

@media (min-width: 1200px) {
    /*Stop the slider growing crazily*/
    #customizr-slider {
        max-width: 1170px;
        margin-left:auto;
        margin-right:auto;
        }
    }

    I just had a chance to look at my site on a wide screen and the body and footer of the website is fine, the only problem is the header stretches all the way across a 1900px screen while the body of the website stops at 1200px.

    Can anybody tell me how to stop the header from stretching like crazy on wide screens?

    Thanks in advance.

Viewing 2 replies - 1 through 2 (of 2 total)

  • You can try this

    @media all and (min-width: 1080px) and (max-width: 1920px) {
.tc-header {
width: 1170px;
margin: 0 auto;
}
#footer {
position: relative;
width: 1170px;
margin: 0 auto;
}
}

    Thread Starter dfwmax

    (@dfwmax)

    @tomaja

    PERFECT! It worked like a charm.

    Thank you so much.

    Marking this issue as resolved.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to stop the header from stretching across a wide screen’ is closed to new replies.

Tags