Mobile view text alignment

houssamalissa
Pathfinder
136 0 38

Hi,

My homepage has 3 image slider sections like this: 

houssamalissa_0-1632223327345.png

 

I like how the text is aligned - however, when we switch to mobile view:

 

houssamalissa_1-1632223364590.png

 

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?

 

 

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
Replies 17 (17)
dmwwebartisan
Shopify Partner
9826 2238 3081

@houssamalissa 

can you share screenshot please

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
houssamalissa
Pathfinder
136 0 38

houssamalissa_0-1632227791073.pnghoussamalissa_1-1632227808372.png

 

houssamalissa_2-1632227822780.png

 

 

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
dmwwebartisan
Shopify Partner
9826 2238 3081

@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;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
houssamalissa
Pathfinder
136 0 38

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

houssamalissa_0-1632234418287.png

 

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
dmwwebartisan
Shopify Partner
9826 2238 3081

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
houssamalissa
Pathfinder
136 0 38

Still no change sadly

 

houssamalissa_0-1632296452507.png

 

 

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
dmwwebartisan
Shopify Partner
9826 2238 3081

@houssamalissa 

Text align center all ready what do you want

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
houssamalissa
Pathfinder
136 0 38

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

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion