Why is my mobile site text not as readable as on PC?

Store Design

Topic summary

Mobile issue: The “What’s Trending Now” heading disappeared on the mobile site after recent CSS changes to remove whitespace, while desktop remained fine. Screenshots were provided to illustrate the problem.

Proposed fix: Edit the theme’s CSS file (base.css/style.css/theme.css) via Online Store > Themes > Edit code and add a CSS media query (max-width: 769px) that applies a margin-top to the specific section containing the heading. A media query ensures the rule only affects small screens.

Outcome: After adding the rule, the heading reappeared on mobile with proper spacing. The before/after image confirmed the result.

Status: Resolved; no further action requested.

Notes:

  • The solution hinges on targeted mobile-only spacing (margin-top) for the affected section.
  • Images were central to understanding the issue and validating the fix.
Summarized with AI on January 15. AI used: gpt-5.
1

On the mobile version the text “Whats Trending Now” is gone. I have added some css to remove the empty white spaces a week ago. On the webversion its just fine

Schermopname (501).png
Schermopname (501).png1920×1080 405 KB

Schermopname (504).png
Schermopname (504).png1875×1062 268 KB

1 Like
2

Hi @Bahrikaan

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 769px){
div#shopify-section-template--19733429518685__6dbcbdec-8449-497c-a475-f33624dc5ff3 {
    margin-top: 40px !important;
}
}
1 Like
3

That worked. Thanks again

1 Like