Changing the slideshow title and subtitle size on desktop and mobile for Debut theme

Store Design
1

Hi

I have found a previous question on this but the posted solution doesn’t seem to work so I’m asking again in the hope that someone else can help me. The slideshow title and subtitle on mobile need to be a bit smaller than they currently are, and on the desktop I’d like them to be bigger. This is the code I’ve added in theme.css but it doesn’t appear to be working - any other suggetsions woul dbe gratefully received.

/* font size for slideshow on desktop and mobile */
@media only screen and (min-width: 750px){
h2.h1.mega-title.slideshow__title.mega-title–large {
font-size: 6em !important;
}
span.mega-subtitle.slideshow__subtitle.mega-subtitle–large {
font-size: 2em !important;
}
}
@media only screen and (max-width: 749px){
h2.h1.mega-title.slideshow__title.slideshow__title–mobile.mega-title–large {
font-size: 2.2em !important;
}

span.mega-subtitle.slideshow__subtitle.slideshow__subtitle–mobile.mega-subtitle–large {
font-size: 1em !important;
}
}

1 Like
2

Hello, @Tish2

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

3

Hi

Thanks for your help.

It’s institchesstroud.co.uk currently protected by password which is “sibray”

4

@Tish2

Thanks for the details

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css.liquid->paste below code at the bottom of the file.
.mega-title {
    font-size: 30px; /* change font size as you like */
}
.mega-subtitle {
 font-size: 20px; /* change font size as you like */
}
@media only screen and (min-width: 750px) {
.mega-title {
    font-size: 36px; /* change font size as you like */
}
.mega-subtitle {
 font-size: 26px; /* change font size as you like */
}
}
5

That’s great thank you so much. I did need to put !important on each line as well.

Thanks again

1 Like
6

@Tish2

Thanks for update and support.

1 Like