Shopify themes, liquid, logos, and UX
Hi,
My homepage has 3 image slider sections like this:
I like how the text is aligned - however, when we switch to mobile view:
The central text alignment doesn't look so good. I'd rather have the text and the button aligned to the bottom-centre of the image for mobile view.
Is there a way to do this that only applies the formatting to mobile?
@media only screen and(min-width:769px){
.shopify-section:first-child .hero__text-content.vertical-center {
padding-top: 221px;
}
.hero__text-content.vertical-center.horizontal-left {
text-align: center;
}
}
Note : If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 749px(already exist)
@oscprofessional So looks like that didn't change the alignment...
Though worth noting those are technically image sliders not heroes so maybe that's why?
hii, @houssamalissa
paste this code on top of the theme.css file.
@media screen and (max-width: 768px){
.hero__text-content.vertical-center.horizontal-left {
text-align: center !important;
}
}
@Zworthkey almost! That aligns it center, but how do I get it center-bottom?
Paste this code into the same file.
@media screen and (max-width: 768px){
.shopify-section:first-child .hero__text-content.vertical-center {
top: 75px !important;
position: relative !important;
}
}
@Zworthkey that works great - only applies to the first slider atm, any way we can have that apply to the subsequent two?
please add below code in bottom of assets/theme.css file.
@media screen and (max-width: 768px){
#shopify-section-162814308005b510c5 .hero__text-content.vertical-center.horizontal-left { text-align: left !important; }
}
Thanks!
@dmwwebartisan it still seems to only impact the first slider and not the other two...
can you share screenshot please
Please remove previous css class and add this following css class
@media screen and (max-width: 768px){
#shopify-section-162814308005b510c5 .hero__text-content.vertical-center.horizontal-left { text-align: left !important; }
#shopify-section-1628688271d06dcc1f .hero__text-content.vertical-center.horizontal-left {text-align: left !important;}
#shopify-section-1628537578207979fa .hero__text-content.vertical-center.horizontal-left { text-align: left !important;}
}
So that's put all the text back in the center 🙂
Please remove previous css and add this css class
@media screen and (max-width: 768px){
#shopify-section-162814308005b510c5 .hero__text-content.vertical-center.horizontal-left { text-align: center !important;}
#shopify-section-1628688271d06dcc1f .hero__text-content.vertical-center.horizontal-left {text-align: center !important;}
#shopify-section-1628537578207979fa .hero__text-content.vertical-center.horizontal-left { text-align: center !important;}
}
Thanks!
Still no change sadly
Text align center all ready what do you want
Thanks!
Was trying to get it aligned bottom-centre for the mobile view 🙂
please add below code in bottom of assets/theme.css file.
@media screen and (max-width: 768px){
#shopify-section-162814308005b510c5 .hero__text-content.vertical-center.horizontal-left {text-align: left!important;}
}
Thanks!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024