Display full-width pages

⚠️ 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.

You can search the user’s forum or ask the user community by opening a new thread in the Customizr theme forum. Before opening a new topic, you might want to follow the troubleshooting steps..

A common request on the Support Forum is for information on how to change the page width to full-width.

Customizr is designed to have the main content limited to 1170px in desktop mode, so you might have some visual problems with the images, which should be partially solved with the centering images feature in Customize>Global Settings>Image settings.
This solution was posted by Rocco (@d4z_c0nf) and deployed successfully by Users.

Where to copy/paste this code?
As this requires both CSS and php coding, you must create a child theme to use it. Everything you need to know about creating a child theme with Customizr here.

Step 1: php coding

// START OF Display full-width pages
add_filter('tc_fp_widget_area', 'use_row_fluid');
add_filter('tc_footer_widget_area', 'use_row_fluid');
add_filter('tc_column_content_wrapper_classes', 'use_row_fluid');

function use_row_fluid($classes){
  return preg_replace('/^row$/', 'row-fluid', $classes);
// END OF Display full-width pages


Step 2: CSS coding

/* START OF Display full-width pages */
.container { 
    width: 100% !important;
#main-wrapper {
    padding: 0 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
/* END OF Display full-width pages */

22 thoughts on “Display full-width pages”

Comments are closed.