[Resolved] Bootstrap breakpoints not correct

[Author]

Posts

[johnA-11]

I am trying to: Set a layout to match the same content to sidebar ratio as Divi

Some background: I am using Divi on a site with a content width of 1080px and a content to sidebar ratio of 70.33% / 29.66% on non-DIVIed pages to match a 8 cols / 4 cols for DIVied pages.

/* Setting 2/3 to 1/3 Content/Sidebar ratio */

#left-area {
	width: 70.33%;
}

#sidebar {
	width: 29.66%;
}

I occasionally add custom post types to the mix using Toolset and can either use the default content/sidebar set up mentioned above or force the page to full width using the following css:

	/*** Take out the divider line between content and sidebar ***/
	#main-content .container:before {background: none;}
	
	/*** Hide Sidebar ***/
	#sidebar {display:none;}
	
	/*** Expand the content area to fullwidth ***/
	@media (min-width: 981px){
		#left-area {
			width: 100%;
			padding: 0 !important;
			float: none !important;
		}
	}

For my latest project I am using layouts because I want to set up the custom type for English Language courses to have a sidebar with a gravity form for making an enquiry.

URL: Check this link for reference:

hidden link

NOTE: I am not using DIVI integration because this forces you to make the parent layout for headers and footers. I have commented on this before. It means you have to go through the pain of styling everything just to get the same look in the Footer and in addition, if you have a fixed nav that shrinks on scroll, this seems to not work with the integrated header. It’s a bit like reinventing the wheel where one should not have to. Suggestion: if you don’t appoint a parent layout for a child, use the themes default Header and Footer.

My Issues: There are two. One that is Layouts related and the other is of my own design.

Layouts first. I tested this on my demo tutorial site. If you go to the demo ABC Consulting site and the responsive layout page. and in layouts take the exercise 3. I want the text to flow below the image at the breakpoint where we view on an iPad in portrait. So, I edit the image cell to have a class of col-md-8 and the text cell to have a class of col-md-4.

But, when I preview in Chrome using the simulated views for iPad, the text is squashed to the right of the image in portrait mode. If I inspect the page using the developer tools I find that there is a sneaky col-sm-8 and col-sm-4 lurking in the markup. If I manually delete those in Developer Tools, voila! that layout displays correctly, text below image.

So that is the first issue.

This leads to my second issue which both resolves that issue and fixes my content to sidebar ratio, but probably not in the conventional way that one should customise the styling of Bootstrap. But hey it works!

I have added my own customisation of those column classes by adding the following to my custom css:

.col-md-8 {
	width: 68.333%;
	padding-right: 5.5%;
}

.col-md-4 {
	width: 31.666%;
	padding-right: 8px !important;
}

NOTE: The percentages are different than the ratio of the code at the top. I had to play around with the figures till I got a reasonable match visually.

in the media query for max-width: 992px I had to add:

	/* Styling for Courses custom type template */

	.single-course {

		.col-md-8 {
			width: 100% !important;
		}

		.col-md-4 {
			width: 100% !important;
			padding: 0;
		}
	}
	

While I was at it ( might as well be hung for a sheep as a lamb ) I added the following to media query max-width: 1080px just to make my layout look more visually pleasing:

	.single-course {

		#main-content .container {
			width: 90% !important;
		}

		#left-area {
			padding-right: 0 !important;
		}

		.col-md-8 {
			width: 65% !important;
			padding-right: 0;
		}

		.col-md-4 {
			width: 35% !important;
			padding-right: 0;
		}

	}
	

All the above has given me the result I wanted but I am not sure that this is the correct way to do it. It may be frowned upon.

If you have any suggestions, much appreciated.

Stephen Vaughan at Abbot Consulting

[Beda]

The main issue is that layouts uses the sm-col by default and your classes will only get added, but will not substitute the Layouts default classes.

This does not affect desgin, becuase it's a "mobile first" approach, and that is what Bootstrap is about.
col-sm ONLY applies if sm kicks in, as such, the col-md still applies on all related screens.

What you can do is apply a filter to change the col-sm native class to something else:
https://toolset.com/documentation/programmer-reference/layouts-framework-api/

There are several filters that let you customize the native Framework that Layouts ships exactly to your Custom Needs.

Another possible approach (probabyl better) is your Custom CSS, in this case.
(I assume you use this only on one or a few Layouts, as such it's not suitable to customize the entire Framework).

[johnA-11]

Hi Beda,

So, to confirm, it is a legitimate practice to override the default row col structure in Bootstrap, as I have done in my custom CSS, to achieve the results I want?

I will read up on the information of the filters, as you suggested, as well though as it looks like there is something useful there.

I may be wrong but I still think that the dev team needs to look into how the bootstrap in the layout cells is behaving. I understand the mobile first approach of Bootstrap. I have used it in a very basic manner up until I saw the variations on .col being used in combination with the Toolset training courses for Layouts.

My point is illustrated with the example I gave in the opening post. From the Bootstrap Grid documentation, the combination of col-md-8 and col-md-4 when used on their own should hit the breakpoint at 768px wide and put the columns one above the other under this size. To reiterate:

If you go to the demo ABC Consulting site and the responsive layout page. and in layouts take the exercise 3. I want the text to flow below the image at the breakpoint where we view on an iPad in portrait. So, I edit the image cell to have a class of col-md-8 and the text cell to have a class of col-md-4.

But, when I preview in Chrome using the simulated views for iPad, the text is squashed to the right of the image in portrait mode. If I inspect the page using the developer tools I find that there is a sneaky col-sm-8 and col-sm-4 lurking in the markup. If I manually delete those in Developer Tools, voila! that layout displays correctly, text below image.

It seems the Toolset layout cells are hard coded with col-sm classes by default, with no easy way to remove them to use whatever col classes you want.

Stephen at John Abbott Consulting.

[Beda]

Yes, I understand this.

But as mentioned previously, Layouts always adds the col-sm.

That's our base class. This is always added.

The only way to change that is the API, as abovelinked.

[johnA-11]

Ok. All Clarified.

Stephen

[Amir Supporter]

An update here - the upcoming version of Layouts will allow you to set the default column width. There will be a global setting for the default column width for the site and you will be able to override it per layout. So, we will not force you to use the 'sm' width and fight with it.