Refresh Theme - Mobile version design

Store Design
, , ,

Topic summary

Issue: Homepage heading is centered on desktop but not on mobile for www.brasebreizh.fr after a base.css change (.collection-list-wrapper .title-wrapper-with-link { width:700px; text-align:center; margin:0 auto }). Goal is to make the mobile layout match desktop for the text “L’authentique Braséro Breton / Brase Breizh”.

What was tried:

  • One reply reported the section already appears centered on mobile (with a screenshot), suggesting a possible misunderstanding.
  • Multiple CSS media-query suggestions to adjust the heading on small screens, generally targeting h2 inside .title-wrapper-with-link, e.g. at max-width ~768 px set font-size to ~20–22 px. OP reported “not working.”
  • A detailed approach using several breakpoints and a specific heading ID (h2#SectionHeading-template–21380935287130__collection_list_MfXY7) with different font sizes per width range, to be added via in theme.liquid (before ). Example outputs were shared.
  • Guidance to place custom CSS inside in theme.liquid using tags (with a placement screenshot).

Current status: No confirmed fix; OP remains unclear (“I don’t get it”).

Open points / next steps:

  • Confirm the correct element and selector (H1 vs H2) being styled.
  • Decide the placement of custom CSS (base.css vs theme.liquid) and ensure media queries target mobile widths.
  • Screenshots are central to the discussion.
Summarized with AI on December 28. AI used: gpt-5.
5

Hello @Edgard22

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

@media (max-width: 767px) {
   .title-wrapper-with-link h2 {
      font-size: 20px !important;
   }
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly