Display full-width pages | Press Customizr

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”

Menaka S
7 December 2016, 4 h 49 min

It expands the rest of the content too.
Gianluca Molina
5 December 2016, 14 h 05 min

But this change will also work on the latest versions of the theme?

I would like to zoom in to 100% also the content of the page but that is always “reduced”
- Menaka S
  6 December 2016, 5 h 30 min
  
  Hi,
  It does work with the latest version of the theme. Thanks 🙂
  - Gianluca Molina
    6 December 2016, 12 h 20 min
    
    But “expands” only the footer, right?
    
    Why do the page content remains a pixel 1170!
Osher
1 November 2016, 14 h 39 min

thanks
Pauliolio
14 October 2016, 15 h 43 min

Many thanks!
Getting this done has been bugging me.

Changed the padding to ‘0px 30px 0px 10px;’ just to give a little bit of an edge though – Perfect!
KeoniWorld
6 June 2016, 5 h 25 min

thank you!!!!
kgyr_AwDay
10 March 2016, 23 h 25 min

Hi,
Is it possible to apply this to only the home page?

Thanks!
- Menaka S
  11 March 2016, 6 h 03 min
  
  Hi,
  The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
Menaka S
11 February 2016, 7 h 06 min

Hi Gaby,
Why do you think it is larger than 100%? Can you give more details please?
- Gaby Isabelle
  12 February 2016, 23 h 47 min
  
  What I mean is, in Firefox, I have to scroll horizontally to see the whole text in the sidebar. It’s not a real problem, I reduced 100% to 98% and it looks good. I was just wondering why it would be a problem…
  - Menaka S
    15 February 2016, 6 h 20 min
    
    Hi Gaby,
    It looks like your style.css is causing the need for horizontal scroll.
    - Gaby Isabelle
      15 February 2016, 14 h 57 min
      
      I figured as much. I just don’t know exactly what is causing that horizontal scroll, as it only does so on Firefox.
      - Menaka S
        16 February 2016, 5 h 02 min
        
        Hi Gaby,
        Our developer team handles support at https://wordpress.org/support/theme/customizr. Do post it there to get an answer to your query.
        
        Gaby Isabelle
        16 February 2016, 14 h 33 min
        
        Well, I thought about it, but as it clearly says support is not given if it’s related to custom CSS, I thought I’d just mention it here, in case someone had an answer for me. It’s a small thing, really, and my 99% setting did the trick, so I really don’t want to bother you guys with this.
        
        Menaka S
        17 February 2016, 7 h 31 min
        
        Hi Gaby,
        Your mainwrapper has margins which are causing the problem.
        
        #main-wrapper { margin-bottom: 0px; margin-top: 0px; // margin-left: 50px; REMOVE THIS LINE margin-right: 10px; }
        
        You are using customizr-pro. So, you can ask these queries in the pro support forum at http://presscustomizr.com/support/
Gaby Isabelle
10 February 2016, 15 h 39 min

Hello, this is great. I notice the display in Mozilla Firefox is larger than 100%. Maybe it’s due to my own style.CSS?

http://completementvedge.com
Menaka S
1 February 2016, 6 h 38 min

This code should work. To change background colour, add background colour to the body.
Annu
28 January 2016, 17 h 17 min

i want background color of of my fullwidth section.But it does not show in full width.both side white background left.I have set fullwidth layout, after that its does not display on full width.Plz help me,M new in this.I have tried lots of thing,but m fail.
Karaoke In Toronto
5 November 2015, 21 h 40 min

Thank you finally I can make a normal website with this.
ellisfr
29 May 2015, 20 h 47 min

Just what I was looking for, working great, thanks Dave !

I would like to thank Dave Bardell for his invaluable contributions, I’ve been using Customizr for 2 weeks, and almost all my questions or customization needs are answered by the various Dave’s post.

Thanks again !
Dave Bardell Post author
8 May 2015, 17 h 02 min

Rocco improved Step 1 #6-#8

Comments are closed.

Step 1: php coding

Step 2: CSS coding

AUTHOR

Dave Bardell

22 thoughts on “Display full-width pages”