White border on mobile, Theme: Empire 2.0

Store Design

Topic summary

A user encountered an unwanted white border appearing on their mobile site using the Empire 2.0 theme.

Root Cause Identified:
GemPages support team diagnosed the issue as an oversized button element causing horizontal overflow, which creates the visible white space on mobile devices.

Proposed Solutions:
Multiple support teams offered CSS-based fixes:

  • GemPages: Recommended editing the theme.liquid file and adding custom CSS before the </head> tag to address the button sizing
  • Denishamakwana: Suggested adding CSS to assets/theme.css targeting the newsletter input field with flex-basis: calc(50% - 20px)
  • Ujjaval: Proposed inserting CSS before the closing </body> tag in theme.liquid
  • PageFly-Victor: Recommended adding html,body{overflow-x:hidden!important} to the bottom of theme.css to hide horizontal overflow

Status: The discussion remains open with no confirmation from the original poster about which solution resolved the issue. All responses include screenshots demonstrating the problem or implementation steps.

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

Hello we have this white border on mobile view, does anyone know where it comes from and how to remove it?

Thanks in advance.

emilbrandon_0-1672899260391.png
emilbrandon_0-1672899260391.png534×1128 189 KB

https://www.remlagret.se/

2

Hello @emilbrandon ,

It’s GemPages support team and glad to support you today.

I checked your website and found that the cause of this issue is that the button is too big:

GemPages_0-1672899985596.png
GemPages_0-1672899985596.png1916×967 100 KB

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_1-1672900061993.png
GemPages_1-1672900061993.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

3

Please add below css code in bottom of assets/theme.css file

.site-footer-block-newsletter .newsletter .newsletter-input {
flex-basis: calc(50% - 20px);

}
Thank you.

4

@emilbrandon
Put below css into theme.liquid file before closing tag

Ujjaval_0-1672900406225.png
Ujjaval_0-1672900406225.png1600×672 33.8 KB

5

Hi [email removed]Emilbrandon,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css,

Step 3: Paste the below code at bottom of the file → Save

html,body{overflow-x:hidden !important}

PageFlyVictor_0-1672902592058.png
PageFlyVictor_0-1672902592058.png720×1556 139 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly