WordPress.org

Support

Support » Themes and Templates » My header and content does not change size when you make windows smaller

My header and content does not change size when you make windows smaller

  • I built my website, but am having troubles. When you look at the website on my large monitor, it looks great. However, when you make the window smaller the content flows over the menu bars and the header is out of its template. Is there any way to make the website adjust to differrent size monitors and windows? The website is: meridianvalleylab.com

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi.
    You need to open your theme’s style.css file, locate the following code:

    #site-title a {
        background: url('http://meridianvalleylab.com/wp-content/themes/twentyeleven/images/mvl_trs.png') left top;
        background-repeat: no-repeat;
        display:block;
        text-indent:-9999px;
        margin: margin: -40 auto 0 auto;
        border-top: 1px #fff;
        border-bot: 1px #fff;
        height: 123px;
        width: 1000px;
    }

    and replace it with this one:

    #site-title a {
        background: url('http://meridianvalleylab.com/wp-content/themes/twentyeleven/images/mvl_trs.png') left top;
        background-repeat: no-repeat;
        display:block;
        text-indent:-9999px;
        margin: margin: -40 auto 0 auto;
        border-top: 1px #fff;
        border-bot: 1px #fff;
        height: 123px;
        width: 100%;
        background-size: contain;
    }

    That should do it, 😉

    Thanks! That worked for the header! Do you know what I need to change to prevent the body from getting smaller. I imagine I need to change something from 100% to 100px, but I do not know what. When I shrink make the windows smaller the images go over my side menu.

    If you mean that the Welcome to Meridian Lab image no longer fits in the content div in the home page when the window is reduced, simply add this code:

    .entry-header .entry-title img {
    width: 100%;
    height: auto;
    }

    right under:

    .entry-title a:active {
    color: #1982d1;
    }

    (To keep things tidy)

    Never heard from you about this. Did you manage to make it work?
    If so, please mark this thread as resolved.
    Thanks.

    On my website, http://www.turntoproductions.com, I have a background image. I put background-size:contain; in to get it to fill the screen, which it does in Firefox, but in Explorer, it shows a small image in the upper-left hand. Is there another attribute I need to give it for Explorer?

    Thanks,

    Michael R. Martin

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    You’re more likely to receive help if you create your own thread on the issue, than reply to a five-month-old thread.

    background-size should work fine in IE9 or greater:
    http://www.w3schools.com/cssref/css3_pr_background-size.asp
    For older versions, you might have to use background-repeat or an actual image tag with some CSS ( ex: #bgd-img{height:auto; width:100%} ) or some jQuery to set its height and width based on window or screen size.
    If you don’t know how to go about implementing either solution, you may wanna check out this link.
    Cheers!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘My header and content does not change size when you make windows smaller’ is closed to new replies.