Create Customizr full width template?

1. Create a copy of custom-page.php from Customizr in your child theme and name it full-width.php

2. On line 5 of full-width.php, change the template name from Custom Page Example to Full Width Layout. Save and upload.

3. Add this to your CSS (either the theme settings Custom CSS pannel or style.css of your child theme):

@media (min-width: 768px) {
.page-template-full-width-php #main-wrapper {
	width: 100%;
	overflow-x: hidden;
	}
.page-template-full-width-php #main-wrapper .breadcrumbs {
	margin-left: 10px;
	}
.page-template-full-width-php .container {
	width: 100%;
	}
.page-template-full-width-php #content {
	width: 98%;
	margin: 0 auto;
	display: inline-block;
	}
.page-template-full-width-php .row {
	margin-left: 0;
	margin-right: -30px;
	}
}

4. Go in the edit screen (backend) of any page you want this template applied to and select the “Full Width Layout” template from the list, in Page Attributes Box.

That’s it. This only works with no sidebar (full width) layout. If you want a sidebar in this layout you will need to create a space in your layout for it and call it using a shortcode for dynamic_sidebar().

That worked great, I just had to contain some of the other stuff that was formerly 100% on the narrow temmplate, to make it look right.

Result:
https://qbservices.net/restaurant-point-sale-full-service/

Looking good, but check out your responsiveness. With smaller viewports your 3-bar button menu is clashing with mega menu and not offering any dropdown items.

Please add this fix to the code above, in the same media query (so it needs to be above the last “}”:

.page-template-full-width-php {overflow-x: hidden;}

At some widths a false horizontal bar appears (there’s only a small empty space to the right) and the line above eliminates the horizontal scroll.

And yes, I left you with a 100% layout. I thought it would be fair to allow you to handle the padding of your contents yourself, not set one myself (for example you might want to have elements that you want to glue to one side or the other)…

Also, note that my code only applies to widths above 768px. There are currently some minor CSS bugs that create a false horizontal bar at small widths too, but I’d stay away from those as I’m pretty sure they will get fixed at some point from the parent theme. If you fix them now you might not come up with a cross-browser solution.

Hey everyone,
Thanks so much for all your help!

@acub

Yeah, I wasn’t complaining of having to re-pad my content. It was expected. I thought I would just share that for anyone who might follow these footsteps and wonder.

Otherwise:

.page-template-full-width-php {overflow-x: hidden;}

How would I specify this not for just the full-width template? …as I notice it is a problem site-wide?

Thanks Again,
Peter

How would I specify this not for just the full-width template? …as I notice it is a problem site-wide?

body {overflow-x: hidden;}

You’re welcome.
Andrei

p.s.: congrats on the overall look of the website.

How do I unscribe from this tag?

@acub

Thank you for the advice… However, I put that body tag in my CSS, and menu is still struggling to drop-down in front on mobile mode.

I first put it at the very bottom of my CSS, then after that didn’t work, I put it up in the normal body tag…

Still no dice. Any other ideas?

I just tested your site on mobile and I see the menu problem.

I don’t want to go and mod whatever you are using to generate the menu. I’d rather disable my CSS rule on mobile devices instead. However, I don’t have inspect tools on mobile so I can’t see if there’s any special class added to the body when the website is viewed on mobile devices.
But we can always add a custom class. In functions.php:

add_filter('body_class','add_custom_mobile_class');
function add_custom_mobile_class($classes) {
	if (wp_is_mobile()) $classes[] = 'this-is-mobile';
	return $classes;
}

Take note of this warning about wp_is_mobile() conditional:

You should realize that this does not detect a mobile phone specifically, as a tablet is considered a mobile device. Check the Plugins area for several helpful alternatives.

Now the body element has this-is-mobile class when viewed on mobile devices and we can use this to only apply our rule if body does not have our class:

body:not(.this-is-mobile) {overflow-x: hidden;}

Hi, i tried to do what in the post (thank guys) but is not working… i have already the full width layout … in the deafult installation of the customizr theme…

i mean, i would like to have my page without the margin on the left & right side of the page, i would like to have the page background that cover the total amount of width of the browser page….. is this the correct way?

Thank you very much guys!
Angelo

Hi,
I am having the same problem as well.
I recently update my WordPress to 4.1.1 & Customizr 3.0.13.

Is it working in this version?

Many Thanks ! ??

This only works with no sidebar (full width) layout. If you want a sidebar in this layout you will need to create a space in your layout for it and call it using a shortcode for dynamic_sidebar().

@acub : how can I do that please?

Hi,
I don’t know if I’d better open a new topic or stay on this one. Please forgive me if I’m mistaken.

I had the same problem as exposed here, and I used the solution proposed.

However, I have some issues with the responsiveness : the footer widget is not center but slightly left-aligned, when I change the page width it does not move “continously” but seems to follow “steps”. Moreover, the space below my footer (colophon) has greatly increased (5x times).

Does anyone experienced the same issues ?

Thanks