Won’t Scale and Adapt for Mobile

Preface: This CSS will only work on Christopher’s site and could very well cause design issues on other sites, I wouldn’t recommend using it.

Hi Christopher,

Okay, so it’s not directly possible to scale these icons to display exactly how they are on desktop (without them becoming extremely small – which Google frown upon’s. As a result, the best you can really do is fix the alignment, but not the exact scale.

Please open the editor that’s being used to add the category icons and head over to the widget styles sidebar. Open the Attribute settings group and set the class to editor-category_icons. Now open the row that’s adding the Editor widget that’s adding the let’s connect images. Open the Attribute settings group and set the class to editor-lets_connect and then save the page.

@media (max-width: 754px) {
	.entry-content .editor-category_icons img {
		margin: 0;
		width: 20%;
	}

	.entry-content .editor-lets_connect img {
		margin: 0;
	}
}

How does that look? Personally, I would recommend making the category icons full width as it’ll look nicer on mobile. To do that, add the following CSS:

@media (max-width: 350px) {
	.entry-content .editor-category_icons img {
		margin: 0;
		width: 100%;
	
}

By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on your Page: Dashboard (please refer to the support tab). Please reference this thread and include your SiteOrigin order key in the email.