Overlapping pricing on Mobile phone

Hi there, i have a problem with overlapped pricing between old and new price on Mobile phone. On different device dimensions, the price is displayed differently. (the space between the new and old price)

Screenshot attached.

Can you help me solve this problem?

Attachments:

You must be logged in to view attached files.

Hello,

I am unable to visit your site. Please remove the IP restrictions. We are accessing the site from Pakistan. So I will check and give you a possible solution.
https://ibb.co/KqtJV7m

Best Regards.

Hey there, sorry for that one, you can access it now.

Hello,

Please try to add the following CSS to your site in Theme Settings > Custom CSS. This will adjust the space between the old and new prices across different device dimensions.

@media only screen and (max-width: 767px) {
    body .price ins .amount {
        margin-left: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    body .price ins .amount {
        margin-left: 15px;
    }
}

Best Regards.

So it looks good on some, but when i access it through Chrome on my iPhone 14 pro, the space on the Product Page is still too big.
Sending screenshots.

Attachments:

You must be logged in to view attached files.

Hello,

Please add the following CSS to your site

@media only screen and (max-width: 767px) {
    body .price ins .amount {
        margin-left: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    body .price ins .amount {
        margin-left: 15px;
    }
}

/* Specific adjustment for iPhone 14 Pro */
@media only screen and (max-width: 430px) {
    body .price ins .amount {
        margin-left: 5px;
    }
}

This should help maintain consistent spacing across different devices, including the iPhone 14 Pro. Change the value as per your requirements.

Best Regards.

Hey there, thanks for the code.

On the Product grid, the things look fine, the prices have less space between them, however, i still have big space on the Product page part.

Could you give me code that adjusts the Product grid price and Product landing page price separately?

Thanks

And also, it seems that there is Layout shift when i try and load the page.

At first, the things look good, however, after a second or less, the layout shift happens and the space between the prices widens.

Could i somehow prevent this layout shift from happening? I disabled the caching plugin.

Hello,

Please add the following CSS to your site for only product archives.

@media only screen and (max-width: 767px) {
    .product-grid-item .price ins .amount {
        margin-left: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-grid-item .price ins .amount {
        margin-left: 15px;
    }
}

/* Specific adjustment for iPhone 14 Pro */
@media only screen and (max-width: 430px) {
    .product-grid-item .price ins .amount {
        margin-left: 5px;
    }
}

Best Regards.

[Author]

Posts