How can I align text to the bottom centre in mobile view?

[houssamalissa]

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?

[oscprofessional]

@houssamalissa ,

@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)

[Zworthkey]

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

[houssamalissa]

@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?

[houssamalissa]

@Zworthkey almost! That aligns it center, but how do I get it center-bottom?

[Zworthkey]

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

[dmwwebartisan]

@houssamalissa

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!

[houssamalissa]

@Zworthkey that works great - only applies to the first slider atm, any way we can have that apply to the subsequent two?

[dmwwebartisan]

@houssamalissa

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!

[houssamalissa]

@dmwwebartisan it still seems to only impact the first slider and not the other two…

[dmwwebartisan]

@houssamalissa

can you share screenshot please

[houssamalissa]

[dmwwebartisan]

@houssamalissa

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

[houssamalissa]

So that’s put all the text back in the center

[dmwwebartisan]

@houssamalissa

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!

[houssamalissa]

Still no change sadly

[dmwwebartisan]

@houssamalissa

Text align center all ready what do you want

Thanks!

[houssamalissa]

Was trying to get it aligned bottom-centre for the mobile view