Docs

[chrisstegner]

I have 2 sites, I believe are the same in the way of settings. But one of them is acting oddly when viewed on the iPhone.

This one looks and acts fine on the phone:

Home

But this one looks odd… it puts elements in smaller columns than the other site. It’s like it doesn’t go full width:

http://cincywarriorrun.org/

Any thoughts would be highly appreciated.

[Friech]

Hi There,

Thanks for writing in! Those site is not the same in terms of how it was setup. The first site (1n5.org) is build with a simple content band > container > columns structure. While the second one has block grids on it. Unlike columns, block grids stay inline regardless of the screen width even if its content gets cut off or out of bounds.

The custom CSS code below will make the block grid full-width on mobile.

@media (max-width:  480px) {
	.x-block-grid-item {
		width: 100% !important;
	}
}

Hope it helps, Cheers!

[chrisstegner]

That seemed to have worked for the home page, but the other pages are still not going full width. Thoughts? Ideas?

Here’s a page that’s still not reading well on mobile:

http://cincywarriorrun.org/kids-fun-run/

[Friech]

Hi There,

Its a different thing that cause that one, its the huge padding you applied on the nested content-band. We need to reset the said padding when the page is viewed on mobile. Please add a class reset-padding to the content-band. Keep in my that is a nested content-band, its a content band that is inside the second content band. So make sure you add that class to the correct band.

And then declare this on your custom CSS on Customizer.

@media (max-width: 480px) {
	.reset-padding {
		padding: 20px !important;
	}
}

Hope it helps, Cheers!

[Author]

Posts