Css for one page only

Support
#1

I need some css for one page only. I have the page tag for it but can’t quite get the css right. I want to center the product images in mobile view in the woocommerce the shop page.

Thanks.

#2

Hi There,

Thank you for writing in, you can append the class .single-product to your selector so your CSS rule will only affect the product page.

But the feature image on the product page is already center in mobile, would you mind to clarify which product images you’re referring to? (provide us the direct page URL)

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

#3

Thank you for your reply here is the URL https://www.rgualtphotography.com/my-shop/

Some of the css in the customiser affects this page already but also affects anothe page. I would add in cornerstone but the woo shop page just shows blank in cornerstone.

All of the images are offset to the right of the page in mobile view.

Thanks

#4

Hi There,

Thanks for the URL!

The product page can’t be edited via cornerstone or the CSS.
You can only add the CSS through Customiser. Please add this CSS to your the Theme Option -> CSS and let us know if that works.

@media (max-width: 767px) {
.archive.woocommerce li.product {
margin: auto !important;
}
}

This CSS will only target to this page only.

Thanks

#5

That worked perfectly thank you for your help. As always you’ve been most helpful :slight_smile:

Thanks

Rob

#6

You’re most welcome, Rob.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.