Fixed width of Customizr for high resolution screens

by tomaja|Published 16 November 2013

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.

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

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):

.carousel-inner {
width: 1170px;
margin: 0 auto;
}

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

AUTHOR

tomaja

Enjoys in creating, customizing and managing websites, especially created with Wordpress and great Customizr theme. He also likes Open Source software, Sci-Fi and geology.

0 posts

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

31 comments

Austen
28 November 2016, 19 h 00 min

It works great but it still aligns my header to the left… I see that a few people have asked for the cure… but to no avail…. anyone? Please? https://uploads.disquscdn.com/images/43f8ad62a4407f18a7e1a48091628cf6c187dfccc521b5ed048f6063192806ce.png
- Menaka S
  29 November 2016, 4 h 31 min
  
  Hi,
  This will work only if you disable sticky header on scroll.
  - Austen
    29 November 2016, 18 h 05 min
    
    Thank you Menaka…. that is great. It is working now…. you are a star. 🙂
    - Menaka S
      30 November 2016, 4 h 25 min
      
      Glad that it works 🙂
Melanie
12 February 2016, 23 h 24 min

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
15 January 2016, 17 h 11 min

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
13 January 2016, 20 h 02 min

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
20 September 2015, 17 h 58 min

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
17 April 2015, 11 h 10 min

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
31 March 2015, 9 h 38 min

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
19 June 2014, 8 h 23 min

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
1 April 2014, 12 h 32 min
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.
```
@media all  {
.tc-header {
width: 1170px;
margin: 0 auto;
}
footer#footer {
width: 1170px;
margin: 0 auto;
}
}
```
Laurence
10 March 2014, 18 h 35 min

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
18 February 2014, 23 h 41 min
Hi, I’d like to use this to keep the page width at standard 960px. Am I doing this right?
```
@media all and (min-width: 480px) and (max-width: 960px) {
.tc-header {
width: 640px;
margin: 0 auto;
}
footer#footer {
width: 640px;
margin: 0 auto;
}
}
```
I’m putting it in my Custom CSS section in my child theme, but I don’t see a change.
Anshul Gagneja
29 January 2014, 21 h 50 min
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.
```
@media (min-width: 1440px) {
  #customizr-slider {
  margin:0 auto;
  width:1170px !important;
  height:500px !important;
  }
}
```
Please check the implementation at http://www.supplies4cpap.com in case of any questions. Thanks !

Thanks,
Anshul Gagneja
- Nicolas
  30 January 2014, 9 h 08 min
  
  Hi Anshul, just remove the !important flag and you should be done.
  Thanks and enjoy the theme
  - Anshul Gagneja
    3 February 2014, 18 h 36 min
    
    Thanks Nick ! That works great !
    
    Thanks,
    Anshul Gagneja
    http://www.supplies4cpap.com
    - Nicolas
      3 February 2014, 19 h 20 min
      
      Great! Thanks for the feedback.
Kevin
15 January 2014, 20 h 56 min

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
  20 January 2015, 5 h 47 min
  
  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
12 December 2013, 11 h 56 min

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
20 November 2013, 18 h 20 min

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
  21 November 2013, 20 h 02 min
  
  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
20 November 2013, 17 h 36 min

Both are set to 2 sidebars, I have even checked the force layout box and it doe not make a difference.
ryan
20 November 2013, 16 h 08 min

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
  20 November 2013, 17 h 01 min
  
  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
    28 June 2014, 10 h 26 min
    
    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
      28 June 2014, 10 h 40 min
      
      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
20 November 2013, 7 h 19 min

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
  31 January 2014, 16 h 45 min
  
  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
20 November 2013, 0 h 14 min

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.