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

Solved
Tish2
Tourist
5 0 2

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;
}
}

KetanKumar
Shopify Partner
14046 1637 5034

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Tish2
Tourist
5 0 2

Hi 

 

Thanks for your help.

 

It's institchesstroud.co.uk currently protected by password which is "sibray"

0 Likes
KetanKumar
Shopify Partner
14046 1637 5034

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Tish2
Tourist
5 0 2

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

 

Thanks again

KetanKumar
Shopify Partner
14046 1637 5034

This is an accepted solution.

@Tish2 

Thanks for update and support.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing