Need some mobile CSS help in my Enfold Startsite

Hi,

Sorry for the delay. We could use the following css code to adjust the size of the icon grid columns and decrease the font size of the icon and the title.

@media only screen and (max-width: 767px) {
.avia-icongrid-numrow-3 li, .avia-icongrid-numrow-4 li, .avia-icongrid-numrow-5 li {
	width: 50%;
}

.avia-icongrid-icon {
	font-size: 18px;
	line-height: 1;
	margin-bottom: 0.5em;
	color: initial;
}

.av_icongrid_title.icongrid_title {
	font-size: 13px;
	text-align: center;
}
}

Here is how it should look after adding the css code above.

Screenshot: https://imgur.com/80Sr1eQ

And for the revolution slider or the image, try to insert the css code inside the css media query that we have just created above to decrease the height of the wrapper.

#rev_slider_26_3_wrapper {
	height: 200px !important;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Try to add this css code to create more space for the icon and the title.

.avia-icongrid-tooltip li .avia-icongrid-front {
	padding: 0;
}

Make sure to include it inside the css media query that we created above. And to increase the size of the icon, try to adjust this css code.

.avia-icongrid-icon {
	font-size: 18px;
	line-height: 1;
	margin-bottom: 0.5em;
	color: initial;
}

Increase the font-size from 18px to 30px or to any value that you prefer.

Best regards,
Ismael

Hi,

Awesome! You are welcome! Please feel free to open a new thread if you need anything else.

Have a nice day.

Best regards,
Ismael