Support

August 2, 2016 at 4:03 pm

After 4.9.6 update, I noticed my medium grid responsive layouts were all “corrupted”. No matter the view port the body was compressed to 495px wide until I was down to 320px or above 1000px.

After investigating our site’s css, switching to the non-child theme (to eliminate a mistake in our child css), we narrowed it down to some code in the espresso_default.css file.

Lines 1122 to 1136

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
		margin: 0;
		width: 320px;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body {
		width: 495px;
	}
}

This is affecting the body tag overall throwing off other responsive css coding. So we mitigated it by adding css to our child theme css (which we force to load last).

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: inherit !important;
		margin: inherit !important;
		width: inherit !important;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body {
		width: inherit !important;
	}
}

It seems to have fixed the medium grid issue… but we’re still testing.

Wondering when this bit of code was added? It seem very non-specific which is why it’s affecting everything.