Mobile view text alignment

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
0 Likes

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes

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



If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Buy me a coffee ☕ Donate Us

@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
0 Likes

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

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

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




If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Buy me a coffee ☕ Donate Us
dmwwebartisan
Shopify Partner
9303 2153 2934

@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 | Bag is a cart drawer that maximizes your sales. View app →

@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
0 Likes
dmwwebartisan
Shopify Partner
9303 2153 2934

@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 | Bag is a cart drawer that maximizes your sales. View app →

@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
0 Likes