Atlantic Theme - spacing on mobile homepage

Store Design

Topic summary

Mobile homepage sections are overlapping on the live phone browser in the Atlantic theme, even though the layout appears correct in the Customize preview. The reported result is illegible text and a broken first-screen layout.

Key developments:

  • The requester shared the store URL so others could inspect the issue directly.
  • Two replies suggested the same fix: add a CSS rule to assets/theme.css under a mobile media query.
  • The proposed code sets semantic layout elements such as section, header, and footer to display: flex on small screens.

Suggested fix:

  • Go to Online Store > Themes > Edit code > assets/theme.css.
  • Paste the provided CSS at the bottom of the file.
  • One version targets screens under 719px, the other under 749px; otherwise the solution is effectively the same.

Outcome:

  • A likely CSS-based workaround was provided.
  • No confirmation was posted yet on whether the change resolved the overlap, so the thread remains open/unconfirmed.

Attachments:

  • Screenshots were central to showing the mismatch between the theme editor preview and the actual mobile browser view.
Summarized with AI on March 6. AI used: gpt-5.4.
1

Hi - my mobile site looks fine on the ‘Customise’ page, but when I open it on a phone browser the first two sections are on top of one another making the text illegible and the whole thing very messy. Does anyone have a tip on how to clear this up? Is it a coding error?

Charlotte

Screenshot 2021-07-23 at 16.01.24.png
Screenshot 2021-07-23 at 16.01.24.png998×1350 137 KB

IMG_7709.PNG
IMG_7709.PNG1170×2532 400 KB

2

@charlottexavier

Please share your store URL!

Thanks!

3

hello @charlottexavier

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

4

Thank you! It’s www.Xavierchina.com

Charlotte

5

Thanks, www.xavierchina.com

1 Like
6

@charlottexavier

Please add the following code at the bottom of your assets/theme.css file.

@media (max-width: 719px){
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: flex;
}
}

Hope this works.

Thanks!

7

hello @charlottexavier

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: flex;
}
}