Spark theme - how to resize heading and subheadings on mobile

Store Design
, ,
1

Hello-

I am using Spark theme (version 2.10.0).

The slideshow headings and subheadings look huge on mobile device. The size option available only alters desktop view. There is no option to resize for mobile. Thoughts?

Link:

Cloverland Home - Candles for Homebodies

2

@cloverlandhome - it needs custom css, can you share password to view page?

3

Ha. Yes, it’s “smellycat01” :slightly_smiling_face:

4

@cloverlandhome - please add this css to the very end of your theme.css file and check, adjust number as per the need

@media screen and (max-width:749px){
.slideshow__heading{font-size: 28px;}
.slideshow__subheading{font-size: 22px;}
}
5

Thank you!! That 100% worked! Just two follow up questions, as they are related.

  1. Is there a way to alter the text max width as well? And 2) if I have a hyperlink for one of the subheadings, is there a way to change the color?
6

@cloverlandhome - default padding is set, text has taken the entire available space as seen in screenshot

and yes color can be changed

suyash1_0-1682354949089.png
suyash1_0-1682354949089.png1366×768 175 KB

7

I would like the width to not take up the whole screen so that the text goes onto two lines. How do I do that?

And thank you! How do I change the hyperlink color?

8

@cloverlandhome - we can try by settings max-width and check, so updated code becomes

@media screen and (max-width:749px){
.slideshow__heading{font-size: 28px; max-width: 70%;    margin: 0 auto;}
.slideshow__subheading{font-size: 22px; max-width: 70%;    margin: 0 auto;}
}