Much space between buy indicators and stock pulse

Shopify Discussion
,

Topic summary

A user reports excessive spacing between the stock pulse and buy indicators, but only on mobile devices for a specific product (magcharge). Screenshots demonstrate the layout issue.

Two solutions proposed:

  1. Conditional code injection - Add custom code to theme.liquid file that targets only the problematic product using its handle (‘magcharge’), placed above the closing tag.

  2. CSS media query approach - Implement mobile-specific CSS targeting devices with max-width 767px to reduce margin/padding on the affected elements (.sold-count, .view-count, .shopify-payment-button). Adjust top and bottom margins to 5px or as needed.

Both solutions can be added through the Shopify theme editor. The issue appears isolated to this single product, as other products display correctly. Users offering solutions requested the post be marked as solved if their suggestions work.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

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

IMG_3285.jpeg
IMG_3285.jpeg1170×2532 192 KB

IMG_3286.jpeg
IMG_3286.jpeg1170×2532 185 KB

shows okay on all other products.

2

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 tag

{% if product.handle == 'magcharge' %}

{% endif %}

RESULT:

Moeed_0-1728464172054.png
Moeed_0-1728464172054.png376×279 26.9 KB

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

Best Regards,
Moeed

3

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