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;
}
}
Solved! Go to the solution
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.
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 */
}
}
That's great thank you so much. I did need to put !important on each line as well.
Thanks again
This is an accepted solution.
Thanks for update and support.
User | Count |
---|---|
546 | |
209 | |
125 | |
80 | |
41 |