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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024