Fixed width of Customizr for high resolution screens

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.

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

Comments are closed.