Fixed width of Customizr for high resolution screens


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


If you dont want to see your header or footer stretched all over the screen, especially if you have high resolution screen, here is the quick solution to fix header, main body and footer at the same width (1170px).

Where to copy/paste this code? The simpliest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then a strongly recommend to create a child theme. Everything you need to know about child theme with Customizr here.

Only thing that is left is to set your slider width (if activated). Just uncheck  for “full width slider” in Customizr options for Front page. If you wish to use sliders on posts/pages then you need to add this to existing rule above (wrapped inside @media query):

 Thats about it, Im looking forward for your comments and suggestions.


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



31 thoughts on “Fixed width of Customizr for high resolution screens

  • Melanie

    This bothered me for a while; I wanted my header background to stretch full screen width, but for the content to be centered and maximum 1080px. I came up with a solution, which is simple, but requires a child theme.

    1) Copy the header.php into your child theme

    2) Add a div within the header that contains all the content:

    <header class="” role=”banner”>

    3) In your css file, add appropriate boundaries:

    .MyHeader {max-width:1040px;margin:0 auto;}

    Seems to work on my site so far!

  • Ian C

    Having the same issue. Is there an update for this? My header is shifted to the left. It seems to work other than that.

  • Kaytalin Platt

    I used the code, but my header and nav bar are floating left, even though margin is set to auto. Footer is centered with the rest of the page.

  • kevin

    Thanks for this!

    This is exactly what I was looking for. The only thing is that this aligns my header to the left. Any thoughts on how to centre it?

  • David

    I have been puzzling over this for a while now but I applied the changes and it looks 1000% better on my wide-screen monitor. Many thanks for this brilliant tip! 🙂

  • Heidi Go

    How about just the page-post width is affected? I prefer page-post width to be limited to 60em since it is said that the optimal readability length is 50 to 60 characters.

  • Ali

    Hi, I have adjusted the width of the website both front and inner pages. Now the problem are the images within slider which seem large and not fitting within the slider. I have tried to adjust the resolution of the images but it is not working.

  • Ben M

    Hey all,

    Like a few other folks, I am trying to fix the site width instead of using responsive design (sorry but I like my website showing up as I intended on mobile devices). I tried the code above (with a few changes) and it didn’t seem to work for me (pasted into the Custom CSS field under Customize). Can someone suggest a simple way to make the site no longer responsive to screen display widths?

    Thanks a bunch,
    Ben

    Here is the code I used.

  • Laurence

    Hi guys.

    This advice has been brilliant and has helped me lock the header and slider to 1024 but the featured pages section below is still wide and the footer is still wide and theres a back to the top link right out in the corner, not really sure whats going on but any help is much appreciated!!

    http://www.techmedicsrepair.com

    Laurence

  • Jordan L Wheeler

    Hi, I’d like to use this to keep the page width at standard 960px. Am I doing this right?

    I’m putting it in my Custom CSS section in my child theme, but I don’t see a change.

  • Anshul Gagneja

    I have used following code to make it fixed width on big resolutions. This is similar to unchecking the box for Full Width Slider. However, I want to use the full width slider for lower resolution. Thanks Nick for such an awesome theme.

    Please check the implementation at http://www.supplies4cpap.com in case of any questions. Thanks !

    Thanks,
    Anshul Gagneja

  • Kevin

    Hello,
    Is 1170 the minimum width that I can set for column? Is it possible to go smaller, such as 960? If I can, will I then need to adjust my sliders to 960 (width) and ?? (height) for this theme to work?
    Also, when I used the code above to fix column width at 1170, some pages have text at the left edge of the column. It is as if left margin now becomes 0. How can this be adjusted?
    One other observation with the fixed width at 1170 is that the “Top of Page” link at bottom of the pages, extends over the right margin. Can this be fixed?

    Thank for your help.

    • Kyle Martin

      Used the same snippet and had the same results as Kevin. Dropped it in the Custom CSS section of theme settings.
      Made header 1170px wide, but threw the sticky header to the left side of the screen. Footer is still centered.
      This also eliminates the margins/padding around widget items on the left and right of the footer.

      I would be fine with the lines above and below the header going the full width of a large screen, but would like the logo and menu still centered over the content.

  • Iris

    Hi,

    I pasted the code into my custom css and unchecked the full width box. However, the slider on my homepage now isn’t sliding anymore… I removed the code so you can’t see it anymore, but any suggestions? I work on a ‘big mac’ by the way. The slider looks okay on a (smaller) latop.

    What sizes of images are best to prepare in PS? 1170 px x 500px?

    rgds

    Iris

  • tomaja Post author

    Hm, this looks like a bug, check this thread about same problem. Maybe @nikeo has some update about this. I remember that this problem has occured already with another Customizr site, but it seems that has nothing to do with the theme itself. Did you try to disable plugins one by one and their widgets ? Did you make same changes in css or theme files ?
    I just checked those sidebar setting again on my testing site and everything looks ok.

    • ryan

      tomaja I would like to thank you for your suggestions however, it is still not working as I would like.
      I did disable plugins and I am using a child them so I will look at that now to see if I have something there that could have broken it.

      Any suggestions for that?

  • ryan

    Unfortunately no, I am using it as an Intranet at work.
    The code worked for re-sizing the header and footer, just not the posts as I hoped.
    Is there additional code that would need to be added for the body?
    I notice the code only includes header and footer.

    • tomaja Post author

      It seems that you dont have sidebars when displaying posts, right ? What are the settings for global default layout and post default layout in Customizr settings, tab “Pages & posts layout” ? (yoursite.com/wp-admin/customize.php)
      Btw, body elements have fixed witdh (1170px) by design for large screen sizes.

      • markusk

        same issue with this css-snippet, indeed using the no-side-bar-layout. all options in customizer set to “no sidebar: full width layout” as i don’t need/want any sidebars.

        how would i do this correctly – preserving the responsiveness?

        tia,
        markus.

        • markusk

          well it actually doesn’t matter which layout is used, it’s the same for all. body is always 1170px – but how to change this to a more narrow max-width properly/responsive?

          thanks for any ideas,
          markus

  • tomaja Post author

    Hi ryan,
    this code is tested on the clean, default install of Customizr and it worked, including posts. Maybe I should mention that this code works for screen resolution widths between 1080px-1920px.
    Can you please provide link to your site ? Thanks.

    • Jim

      Thanks for the code. I added it to my site and it works well for widths of 1170px and up, but for lower resolutions the slider is off-center (it pulls to the right) until you reach phone resolutions, where it fills the width of the screen. How should I change the styles to keep the slider centered in the tablet range of resolutions? Thanks again!

  • ryan

    Currently all of the posts I view are full width, I was hoping the above code resolve that but it didn’t.

    How do I make it so that my posts are not taking up the full width?

    I would like have it so my left and right sidebars are still visible with the posts centered between.

Comments are closed.