Making text bigger on desktop only - Dawn theme

Shopify Discussion

Topic summary

A user wants to increase the font size of specific text (“Welcome to Feminique By Cameron”) on the desktop version of their Dawn theme Shopify store only, while keeping mobile sizing unchanged.

Solution Provided:

  • Locate the CSS class name by searching for the text in the theme code
  • Apply a media query targeting devices with minimum width of 768px (typical desktop breakpoint)
  • Use font-size: 24px for desktop while maintaining font-size: 16px as the base mobile size

Implementation Questions:
The user is uncertain where to add the CSS code—whether in theme.liquid, base.css, or another file. The responder suggests trying both locations, noting that CSS cascade rules may cause overrides depending on code structure. They acknowledge the guidance is somewhat vague without seeing the full code layout, but recommend testing and reverting if needed.

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

I would like the text circled in this picture to be a lot bigger than what it is on desktop version only. Please provide a code for me to make this change.

Web capture_4-11-2023_165851_www.feminiquebycameron.com.jpeg
Web capture_4-11-2023_165851_www.feminiquebycameron.com.jpeg1419×581 98.4 KB

2

You will want to find what the class name and replace it with the code below .your-text-class. You can find the class name easily if you search for that specific text “Welcome to Feminique By Cameron”. It will look like <div class=theclassnameyouarelookingfor

Apply the css below

/* This is the default style that will want to apply only on mobile devices */
.your-text-class {
  font-size: 16px; /* Example base size */
}

/* This media query will apply styles for devices with a width of 768 pixels or more (typical for desktops for your use case) */
@media (min-width: 768px) {
  .your-text-class {
    font-size: 24px; /* Larger text size for desktop */
  }
}
3

Thank you for the code, but what section in the code editor should I be looking for? Base.ccs? theme.liquid?

4

It can be either, but be mindful that the css code that applies to that element may be overridden based on “cascade” css rule. I cannot see how your code is fully laid out so I cannot say for certain where you will want it for your specific need.

Sorry that its very vague, but give it a try on both and see how it appears. You can revert if it doesn’t work out.