Dead space screen side

Store Design
, , , ,

Topic summary

  • Issue: On mobile, an extra horizontal space appears on the right side of the screen, noticeable near the announcement bar and when scrolling banners.

  • Context: Shopify storefront (bentobay.de, password provided). A screenshot was attached to illustrate the overflow.

  • Suspected cause: A layout overflow from the pricing plan section.

  • Proposed fix: Edit the theme stylesheet (section-subscription-product.css). In the mobile media query (max-width: 750px), adjust the .odda-subscription–badge styles by setting position to absolute, top to -25%, and right to 0 (replacing the previous -5%) to prevent horizontal overflow.

  • Outcome/Status: A concrete CSS adjustment was suggested; no confirmation yet from the original poster that it resolves the issue. Discussion remains open pending validation.

Summarized with AI on December 27. AI used: gpt-5.
1

Hi,

for some reason I have an extra space on the right side of my screen on mobile (you can see it clearly next to the announcement bar or when you scroll to the banners.

Does anyone know a way to remove it? I did it in the past with css, but I can’t recall anymore

Website: bentobay.de

pass: bawvay

Daniel19901_0-1717779626374.png
Daniel19901_0-1717779626374.png634×510 42 KB

2

Hi @Daniel19901

I think that is issue with pricing plan section, you can try to go to file “section-subscription-product.css”

find and update like below:

@media all and (max-width: 750px) {
 .odda-subscription--badge {
    position: absolute;
    top: -25%;
    right: 0; // Old value is -5%;
  }
....

Hope this helps!