FROM CACHE - en_header

Mobile view text alignment

houssamalissa
Pathfinder
139 0 40

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
12522 1933 2480

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Zworthkey
Shopify Partner
5581 642 1512

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 40

@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
houssamalissa
Pathfinder
139 0 40

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

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
Shopify Partner
11014 2378 3402

@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 | Click here GemPages The most powerful Shopify page builder.
houssamalissa
Pathfinder
139 0 40

@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
11014 2378 3402

@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 | Click here GemPages The most powerful Shopify page builder.
houssamalissa
Pathfinder
139 0 40

@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
11014 2378 3402

@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 | Click here GemPages The most powerful Shopify page builder.
houssamalissa
Pathfinder
139 0 40

houssamalissa_0-1632227791073.pnghoussamalissa_1-1632227808372.png

 

houssamalissa_2-1632227822780.png

 

 

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
dmwwebartisan
Shopify Partner
11014 2378 3402

@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 | Click here GemPages The most powerful Shopify page builder.
houssamalissa
Pathfinder
139 0 40

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
11014 2378 3402

@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 | Click here GemPages The most powerful Shopify page builder.
houssamalissa
Pathfinder
139 0 40

Still no change sadly

 

houssamalissa_0-1632296452507.png

 

 

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
dmwwebartisan
Shopify Partner
11014 2378 3402

@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 | Click here GemPages The most powerful Shopify page builder.
houssamalissa
Pathfinder
139 0 40

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

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