Unit of measure and price overlapped only on a certain category on mobile

Good morning,

I found an error when displaying the unit of measure, an error that appears only in one category, not in all, and only on mobile. The unit of measure overlaps with the price.

https://magurban.ro/categorie-produs/garduri/gard-metalic/sipca-metalica-gard/

Hello,

I have checked your provided link and the price is showing fine. Can you please Attach some screenshots and provide us with a list of steps on how to reproduce them on your website.

Best Regards.

Hello,

The problem is visible only on the phone (iPhone) and only in this category: https://magurban.ro/categorie-produs/garduri/gard-metalic/sipca-metalica-gard/

It looks good on PC. Images attached

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

/* iPhone 12 Pro Max, 13 Pro Max */ 
@media only screen and (min-device-width: 428px) and (max-device-width: 926px) and (-webkit-min-device-pixel-ratio: 3) { 
.wd-price-unit {
 margin-inline-start: 10px !important;
 } 
}

min-device-width and max-device-width: These properties define the range of device widths to target specific iPhone models.

-webkit-min-device-pixel-ratio:This property ensures the media query only applies to devices with a specific pixel density, which is common for iPhones.

Best Regards.

Hello,

I added the received code but it doesn’t work for my iPhone model (15 simple) so I added the received code in chatgpt to be updated for all iPhone models. I added the code below and it works in the category with problems mentioned above: https://magurban.ro/categorie-produs/garduri/gard-metalic/sipca-metalica-gard/

/* iPhone 11, 12, 13, 14, 15 (toate modelele) */

@media only screen and (min-device-width: 375px) and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) {
.wd-price-unit {
margin-inline-start: 10px !important;
}
}

The problem now is that in the categories where there was no overlap, the area is now too large – attached image.
Why is it that only the category mentioned above has this problem with the overlap of quantity over price?

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

/* iPhone 11, 12, 13, 14, 15 (toate modelele) */
@media only screen and (min-device-width: 375px) and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) {
    .term-365 .wd-price-unit {
        margin-inline-start: 10px !important;
    }
}

Best Regards.

Thank you very much! Is OK.
The ticket can be closed

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts