how can i make slideshow mobile view text smaller/a bit lower becuase mobile view you cant read it that well.
https://www.call2love.com/
PW: raczek77
mobile view:
Topic summary
A user seeks to reduce the size and adjust the positioning of slideshow text on mobile devices for better readability in the Spark theme.
Problem:
- Slideshow text is difficult to read on mobile view
- Text needs to be smaller and positioned lower
Solutions Provided:
Two community members offered CSS code solutions:
-
Solution 1: Add CSS to the bottom of theme.css file targeting slideshow headings, buttons, and text elements with font-size adjustments using media queries for screens under 45em width
-
Solution 2: Similar approach using media query for max-width 768px, targeting slideshow headings (h4) and button elements with specific font-size declarations marked as !important
Implementation:
Both solutions require navigating to Online Store → Theme → Edit code → Assets → theme.css and adding the provided CSS at the bottom of the file.
The discussion remains open with no confirmation from the original poster about which solution was implemented or whether the issue was resolved.
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the theme.css file:
@media (max-width: 45em) {
h4.slideshow__heading.ff-heading.animation-fade-up-split-reveal.animation-initialized {font-size: 22px !important;}
.slideshow__cell.slideshow–has-shadow .slideshow__button .btn {font-size: 12px !important;;}
}
Regards,
San
Hello @Chantelrudden
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.
@media only screen and (max-width: 768px) {
h4.slideshow__heading.ff-heading.animation-fade-up-split-reveal.animation-initialized {
font-size: 28px !important;
}
a.btn.btn--primary.btn--large {
font-size: 17px !important;
}
}