WordPress.org

Ready to get started?Download WordPress

Forums

My header and content does not change size when you make windows smaller (8 posts)

  1. CWinter_1
    Member
    Posted 2 years ago #

    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

  2. Marventus
    Member
    Posted 2 years ago #

    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, ;-)

  3. CWinter_1
    Member
    Posted 2 years ago #

    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.

  4. Marventus
    Member
    Posted 2 years ago #

    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)

  5. Marventus
    Member
    Posted 2 years ago #

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

  6. mrmartin59
    Member
    Posted 1 year ago #

    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

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  8. Marventus
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic