Open Closed Topic

Hi there,

Sorry but I cannot find the way to re-open a closed topic (appreciate if you can explain me how to do it for next time ;-))

I want to re-open the ticket below that I was discussing with Luke Nielsen because the CSS to display 2 attribute images on Simple Product even it works fine on Desktop, on mobile 1 of the images (right bottom) overlaps the product image and cannot be seen (attached some pics)

Thanks
XL

——
April 28, 2022 at 11:28 am
#371619

Luke Nielsen
Keymaster
Hello,

Please, replace the old code with this one. So after that, the “recycled” attribute label will be on the right bottom corner and others on the left top corner.

.single-product .product-images .labels-rounded {
bottom: 0;
}

.single-product .label-term-recycled {
position: absolute;
bottom: 156px;
}

.product-grid-item .label-term-recycled {
position: absolute;
bottom: 0;
right: 0;
}

.product-grid-item .product-labels {
right: 7px;
bottom: 7px;
max-width: 100%;
pointer-events: none;
}
I hope this helps!

Kind Regards

Attachments:

You must be logged in to view attached files.

Hello,

Sorry, I thought that the issue was resolved so I closed the topic. Judging by your screenshot you have enabled the code for another site that doesn’t have a product gallery so the label is on the middle of the image. This custom code was prepared for the site that you attached in the private content. Here are a few images from there.

https://gyazo.com/ec4a248b9d6d653c17cd5aed7b3a9894

https://gyazo.com/42980999c6694ba7f452db393412009d

Please, send me the URL of the site that is on your screenshots.

Kind Regards

Hi Luke,

Yes, you’re totally right. I was testing the code on our dev site page. Sorry I didn’t mention it.

If I’m not wrong, making some tests with the code, I have realized that the position of the label attribute icon changes whenever there is no images on the single product gallery. Is that correct?

I’m Just trying to understand where the bottom position is regarding to the main product image. I believe the code will be affected with the image & thumbnails position of the product page. Is that right?

Thanks in advance,
XL

Hello,

Yes, the position of the label attribute depends on whether the product has the product gallery.

https://monosnap.com/file/CKBk6TOZ4m0zOD5Q3eilQYkHn6vcLG

On your test site, you don’t have it, therefore the label attribute is in the middle of the image.

https://gyazo.com/a10e44ce01ec062d484611181fba1ca8

The bottom position starts with the product gallery (if it is).

https://monosnap.com/file/O1W1Vl5gWB1y9MAT5ZANyjfQZTvMCJ

If the product doesn’t have the product gallery then the bottom position starts with the main picture of the product.

https://monosnap.com/file/g69wtr2sQCdo4eGkeKRWlmN1rW05cv

So as to change the position of the label attribute on your test site, you should just change the bottom: 156px; value as you need.

Kind Regards

Hey Luke,

Sorry for late reply as I was away for business.

Awesome. All clear. Thanks a lot!!!

Have a great week ahead.
XL

Hello,

We will appreciate it if you can refer your friends or family members to become a part of our Xtemos family.

In case you need any additional help, I’d be more than happy to assist you.

Kind Regards

[Author]

Posts