Re: Making text bigger on desktop only - Dawn theme

Making text bigger on desktop only - Dawn theme

FBC2022
Explorer
74 0 15

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

Replies 3 (3)

Alex520
Shopify Partner
15 2 5

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 */
  }
}

 

Alex - Developer
Available for Hire
FBC2022
Explorer
74 0 15

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

Alex520
Shopify Partner
15 2 5

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.

Alex - Developer
Available for Hire