'image with text overlay' image alignment mobile. debut theme

Solved
Highlighted
Excursionist
16 0 11

Hi all. I have added a new header photo (see photo). It looks great on desktop but not on mobile (see photo). Is there a way to make it so the header can be aligned right so that as the browser gets smaller I can always see LeBron (see example video). thank you in advance.

store URL: https://myjerseyposter.com/

desktop photo:

Screen Shot 2020-11-19 at 5.30.29 PM.png

mobile photo:

Screen Shot 2020-11-19 at 5.30.36 PM.png

example video:

ezgif.com-gif-maker.gif

thank you so much!

0 Likes
Highlighted
Shopify Partner
3182 701 847

@myjerseyposter 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (min-width: 750px){
.hero .mega-title{ text-align: left !important; }
.text-center .mega-subtitle { max-width: 100% !important; text-align: left !important; }
}

 

Hope this helps.

Thanks! 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted

Hi @myjerseyposter 

 

Add the following code at the bottom of your CSS file assets >> theme.scss.liquid

 

@media only screen and (min-width: 750px){ .hero .mega-title{ text-align: left !important; } .text-center .mega-subtitle { max-width: 100% !important; text-align: left !important; } }

 

Best Wishes 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on parth.bhut143@outlook.com

0 Likes
Highlighted
Excursionist
16 0 11

hi @ParthBhut @dmwwebartisan - thank you so much!

is there any way i can align the text left for that 1 unique 'image with text overlay' section, while keeping the text of all other 'image with text overlay' sections centered? I am not sure if this is possible but i thank you in advance. 

0 Likes
Highlighted

This is an accepted solution.

Hi @myjerseyposter 

sure we can do that please replace previous code with below new code snippet.

 

@media only screen and (min-width: 750px){ #shopify-section-1588212631059 .hero .mega-title{ text-align: left !important; } #shopify-section-1588212631059 .text-center .mega-subtitle { max-width: 100% !important; text-align: left !important; } }

 

Best Wishes 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on parth.bhut143@outlook.com

 

Highlighted
Excursionist
16 0 11

@ParthBhut cheers my friend

0 Likes