Fixed width of Customizr for high resolution screens

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

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.

Leave a Reply to Nicolas Cancel reply

Your email address will not be published. Required fields are marked *

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