How to change header size on mobile only in Refresh theme

Store Design
1

Hello,

The desktop looks fine, but on the mobile version the title “DoggyDreamShop” is 2 lines and would like to make it smaller.

Store name: https://doggydreamshop.us/

Thank you

2

Hey, it’s pretty simple. You’ll need to add a tiny bit of CSS code that will stop it from wrapping. Here’s the code:

header .header__heading-link .h2 {
    text-wrap: nowrap;
}

Go to Online Store > Themes > Edit Code.

  • Open the CSS File:

    • Look for theme.css or style.css in the Assets folder and open it.
    • Add the code and save.

You can make a theme duplicate before working on it if you’re worried.

If you’re not comfortable with coding, EasyEdits lets you visually resize headers and preview changes on mobile. You can try it for free and keep your edits forever. Fair disclaimer, I’m the developer.

Let me know what ends up working for you or if I can help further!

3

Hi @DoggyDreamShop

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
a.header__heading-link span {
    font-size: 15px !important;
}
}

Here is the result:

image_480.png
image_480.png267×480 156 KB

I hope this helps

Best,

Daisy