Reduce text size (Image with Text) on mobile ONLY?

[Mark1882]

I’m using Dawn theme and wondered if it’s possible to use different font sizes for desktop and mobile. I’m finding it impossible to find a way whereby I’m happy with the appearance of my Image with Text on both devices. I would like to be able to reduce the font size on mobile only. Seems like yet another simple feature that should come as standard! Many thanks

[GemPages]

Hello @Mark1882 

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[Mark1882]

Hi @GemPages 

I never really got to the bottom of my problem and wondered if you could please offer some advice.

Is it possible to have the Image with Text Heading size set to large on desktop and medium on mobile at the same time? I would also love the text to appear in three lines in both instances, as per attached pic.

Many thanks,

Mark  

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

h2.image-with-text__heading.h1 {
font-size: 30px;
}

[Mark1882]

Thank you @ZestardTech, this is good to know. However, it only fixes half of my problem - I was hoping to have different font sizes for desktop and mobile view. I think for now I'm just going to opt for a 'fake' image and text banner, i.e a clickable image banner with a fixed width. This way it'll have the same appearance on both desktop and mobile and I'll have full control of the design, albeit with slightly blurry jpeg text...

[ZestardTech]

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[Mark1882]

Hi @GemPages GemPages and @ZestardTech.

My store url is www.futbolista.co.uk password: awnias.

In short, I'd love the option to select Large text on desktop and Small text on mobile. I'm attaching 2 screenshots which hopefully illustrate my current problem - what I'm seeing in Shopify and what I'm seeing in reality! Thanks guys 

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

@media (max-width: 768px) {
h2.image-with-text__heading.h0 {
font-size: 2rem!important;
}
}

Screenshot :- https://prnt.sc/FsRMA5mHDGQR

[Mark1882]

Thank you @ZestardTech, the mobile version looks much better now. The text size on mobile actually increased when I reduced the Desktop image width to Medium. This looks great but I'm kind of back to my original problem. I would like the Heading size large and on three lines (one word each line) on Desktop. Is this possible? Thank you so much