Docs

[peglegsqueeks]

Hi Guys, Loving X-theme, Yes I’m a big fan.

URL pawdinkum.com.au
Wordpress ver 4.6.1
X-theme ver 4.6.2
cornerstone ver 1.3.3

Refer to attached image:-

I would like to have the border of the product image almost the same size and shape as the image with a 5px space top bottom left and right.

I’ve used the firefox code inspector to try to find the right CSS object to modify, but with no success.

Any help would be greatly appreciated.

Kind Regards
Chris G

[Paul R]

Hi Chris,

You can add this under Custom > Edit Global CSS in the Customizer.

.single-product .product a.x-img>img {
   width:100%;
}

Hope that helps.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.single-product a.x-img>img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #000;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.45);
    padding: 8px;

}
.single-product .x-img-thumbnail{
   border:none;
   box-shadow:none;
}

Hope that helps.

[peglegsqueeks]

Thanks Guys, Christopher ,

I copied your recommendations into custom global css.
It worked really well.The white space to the left and right is now gone. It looks much more even now. Thanks so much.

Can I ask, besides using code inspector within the browser page is their an easy way to identify the appropriate css object, such as these for the border of the image within 1 product view:-

.single-product a.x-img>img
.single-product .x-img-thumbnail

Thanks for all your help. I am always looking for ways to better my css skills. Any suggestions would be greatly appreciated.

Kind Regards
Chris G

[Paul R]

Hi Chris,

We only use chrome developer tools(Inspect element).

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

Hope that helps.

[Author]

Posts