Make Header area, footer area and text in between all the same width

  • LiloLil

    (@lilolil)


    10 years, 5 months ago

    Hi all,

    I am working on a site http://www.ottoclinic.eu/wp/ and I’ve been trying to change the slider to make the images taller. I had the header, footer and text area + sidebars in the middle all lining up and now they are all out of sync with each other although the code in the css is set at 1170 px for each area.

    Apologies as I don’t know code or the correct terminology to explain my problem and it’s probably something really simple that I can’t see. But I’d like the header, navy menu bar, slider, page content (i.e. 2 sidebars and text in between) and footer area to all be the same width. Can anybody help me as I feel I’m going around in circles and not sure what to try next. Also on this subject, is it possible to set a standard page width in the css so that all areas of the page will appear the same (width) on all browsers? All help greatly and gratefully appreciated! Thank you.

    Lilolil

Viewing 4 replies - 1 through 4 (of 4 total)
  • tomaja

    (@tomaja)

    10 years, 5 months ago

    You can try to add this to custom css or to your child theme style.css

    @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 LiloLil

    (@lilolil)

    10 years, 5 months ago

    Hi again, thanks so much for your response above – I tried that and it helped and I found that by reducing the width to 984 px, the home page layout, widths of all the elements in IE looks fine but in Chrome and Mozilla it looks wrong e.g. the header and navbar are not the same width as everything below them. I just wonder is there a way to set the code in the css in order that the site pages are exactly the same in every browser? I thought I came across a snippet for this in the user forum but now can’t find it. Any help greatly appreciated – you can see the site at http://www.ottoclinic.eu/wp/. Many thanks.

    tomaja

    (@tomaja)

    10 years, 5 months ago

    Your custom css code is quite messy, I must say. Your current setting is screen width 984px only and that is not good, you need to set max-width to greater width for your site can to be seen right on greater screens as well. You also need to remove the line
    footer#footer {width: 1100px;} because it set footer to be fixed at 1100px
    I tried the above code on clean, default install and it works so I guess you need to check your custom css code again and make corrections.

    Thread Starter LiloLil

    (@lilolil)

    10 years, 5 months ago

    Hi tomaja,

    Thanks for your insight and patience – I know the css code is quite messy – mainly because I don’t know what I’m doing! In response to your comments on the max-width, would that explain why the About Us menu keeps disappearing off the navbar when I click on a page in any other dropdown menu? I’m going to go through the css and try to sort it out so will keep you posted. Thanks again for all your help on this.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Make Header area, footer area and text in between all the same width’ is closed to new replies.