Much space between buy indicators and stock pulse

[TrendBlend]

Hello, for 1 product a lot of space shows in between the stock pulse and the buy indicators for just mobile phone.

URL much space: https://trendblend.eu/products/magcharge

 

shows okay on all other products.

[Moeed · Accepted solution]

Hey @TrendBlend 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if product.handle == 'magcharge' %}
<style>
@media screen and (max-width: 767px) {
.product .product__media-wrapper .mobile_content .instock-pulse {
    margin-top: -15px !important;
}
}
</style>
{% endif %}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[rajweb]

Hey @TrendBlend ,

To resolve the extra space between the stock pulse and buy indicators on mobile, you can adjust the CSS for mobile views to reduce the margin or padding in that section. You can add a media query that targets mobile devices and removes the unnecessary space.

Here's an example of how you can modify the CSS:

@media only screen and (max-width: 767px) {
  .sold-count.shopify-payment-button,
  .view-count.shopify-payment-button {
    margin-top: 5px; /* Adjust this value as needed */
    margin-bottom: 5px; /* Adjust this value as needed */
  }
}

You can place this CSS in your theme's stylesheet (usually found under Assets > theme.css or theme.scss.liquid) or directly in your custom CSS section in the Shopify theme editor.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regard,

Rajat Sharma