Can text alignment be adjusted for mobile view in Shopify?

houssamalissa
Pathfinder
139 0 42

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)

oscprofessional
Shopify Partner
15830 2369 3071

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
houssamalissa
Pathfinder
139 0 42

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

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

Zworthkey
Shopify Partner
5581 642 1565

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
Pathfinder
139 0 42

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

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
Zworthkey
Shopify Partner
5581 642 1565

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




houssamalissa
Pathfinder
139 0 42

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

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
dmwwebartisan
Shopify Partner
12279 2546 3693

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
houssamalissa
Pathfinder
139 0 42

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

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
dmwwebartisan
Shopify Partner
12279 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
houssamalissa
Pathfinder
139 0 42

houssamalissa_0-1632227791073.pnghoussamalissa_1-1632227808372.png

 

houssamalissa_2-1632227822780.png

 

 

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
dmwwebartisan
Shopify Partner
12279 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
houssamalissa
Pathfinder
139 0 42

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
12279 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
houssamalissa
Pathfinder
139 0 42

Still no change sadly

 

houssamalissa_0-1632296452507.png

 

 

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
dmwwebartisan
Shopify Partner
12279 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
houssamalissa
Pathfinder
139 0 42

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

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

dmwwebartisan
Shopify Partner
12279 2546 3693

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app