Columns not responsive - overlapping

[CInno]

Hello. I have 4 columns on my home page that overlap on smaller screen sizes. Can you help me figure out why? Thank you!

[friech]

Hi There,

Thank you for writing in, are you referring to that section below? If so, please add this following custom CSS on the Headline’s Element CSS area.

@media (min-width: 768px) and (max-width: 979px) {
	$el.x-text .x-text-content-text-primary {
		font-size: 0.70em;
	}
}

Feel free to adjust the 0.70em value where you see it fits.

Hope that helps,
Cheers!

[CInno]

Thank you! I’ve noticed it on other pages as well. Is there a global change I can use? Thanks!

[rad]

Hi @CInno,

You’ll have to move that CSS in Theme Option’s CSS and change it to this

@media (min-width: 768px) and (max-width: 979px) {
	.x-text-content-text-primary {
		font-size: 0.70em;
	}
}

It will be applied globally.

Thanks!

[CInno]

@Rad

@media (min-width: 768px) and (max-width: 979px) {
.x-text-content-text-primary {
font-size: 0.70em;
}
}

Thank you! I added that and it doesn’t seem to have worked. What could be causing the overlap?

[mldarshana]

Hi There,

Could you please copy all of your custom CSS rules into an online tool like CSS Lint (http://csslint.net/) and see if you’re getting any CSS errors. If you have any errors, you need to correct them so that your CSS will parse correctly.

Let us know how it goes.
Thanks!