Reformation Theme Font Size change

Store Design
, , ,

Topic summary

Topic: Adjusting typography/layout in the Reformation Shopify theme.

  • Goal: Increase the “Text with Icons” heading size to 30px and fix Gallery section headers that appear split after publishing (while looking correct in preview). Screenshots are provided and central to illustrating the issues.

  • Guidance provided: Step-by-step instructions to add custom CSS via Online Store > Themes > Edit code, then place rules in base.css (or a custom CSS file).
    • A selector targeting the Gallery item heading is set to 30px to enlarge the header text.
    • A media query for screens ≥1440px adjusts padding on .gallery__item-content, which may address the published layout/splitting discrepancy.
    • Note to ensure media query CSS aligns with existing file rules.

  • Status: No confirmation from the requester that the changes resolved the issues; outcome pending. No additional conflicts or alternative solutions were discussed.

  • Key actions: Add the provided CSS rules to the theme’s CSS file, verify on published store, and adjust media queries as needed if the Gallery header still splits.

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

Hi guys, I need help changing font sizes on Reformation theme:

https://7c5ea5-86.myshopify.com/

Screenshot 2024-06-10 at 11.51.37 AM.png
Screenshot 2024-06-10 at 11.51.37 AM.png2038×684 53.7 KB

This is a Text with Icons layout and the heading size is too small. How do I edit the code to change it to 30px?

Also, the headers on the Gallery are split once published, but they look okay in preview. How can I fix this?

Screenshot 2024-06-10 at 11.55.44 AM.png
Screenshot 2024-06-10 at 11.55.44 AM.png2862×1122 512 KB

2

Hello! @Shay20241 Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
body .gallery__item-content h4 {
  font-size: 30px;
}

/* Please make sure to modify the media query CSS in his current file. */
@media only screen and (min-width: 1440px) { 
  body .gallery__item-content {
      padding: 60px 40px;
  }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.