Woocommerce Shop Images in Mobile Screen

Hi @queencitycorals

This is a page builder-specific issue. You can fix it by adjusting the Elementor widget settings.

Alternatively, you can also add this custom CSS to your site. This should help resolve the padding issue.

@media (max-width: 767px) {
	.woocommerce div.product {
		padding: 20px !important;
	}
}

Please note that, we don’t provide help & support for 3rd-party plugins or themes as they’re outside our support scope. if you still need helps, it would be best to reach out to the plugin developer for further assistance.

I hope this helps! If you have any other questions, feel free to ask.

Hi @queencitycorals

It looks like the CSS has not been activated yet. Did you clear the site cache after adding the custom CSS? Make sure you’ve added it correctly and clear the site cache:

.woocommerce div.product {
    padding: 20px !important;
}

Or this one:

@media only screen and (max-width: 768px) {
    .elementor-60329 .woocommerce div.product {
    padding: 20px !important;
    }
}

or this one:

@media only screen and (max-width: 768px) {
    .woocommerce div.product {
    padding: 20px !important;
    }
}

Additionally, did you try to add the padding in the shop widget settings?

Let us know how that goes.