Aligning text of mobile image banner Dawn Theme

[markaib]

Hi Shopify Community!

I'm trying to optimize the text placement for the mobile image banner in Dawn theme. I decreased the width of the heading and text boxes so the image in the background can be seen. I've been tinkering around with the codes in section-image-banner.css and came up with this:

@media only screen and (max-width:767px) {

.banner__heading {
font-size: 20px;
font-weight: 700;
width: 140px;
}

.banner__text {
font-size: 14px;
width: 100px;
}
}

As you can see the code works perfectly well for the top image banner, but not for the bottom. Is there a way so I can align the bottom image banner text to the right, but also keep the top image banner texts aligned to the left? 

website: galleryibmarka.com

password: skiegi

Thanks in advance! 🙂

[suyash1 · Accepted solution]

@markaib - add this css to the very end of your base.css file and check

@media only screen and (max-width: 767px){
#Banner-template--14732891652194__16647696112a083fa9 .banner__heading {margin: 0 auto;    margin-right: 0;}

#Banner-template--14732891652194__16647696112a083fa9 .banner__text{margin: 0 auto;    margin-right: 0;}
}

[suyash1 · Accepted solution]

@markaib 

[suyash1 · Accepted solution]

@markaib - add this css to the very end of your base.css file and check

@media only screen and (max-width: 767px){
#Banner-template--14732891652194__16647696112a083fa9 .banner__heading {margin: 0 auto;    margin-right: 0;}

#Banner-template--14732891652194__16647696112a083fa9 .banner__text{margin: 0 auto;    margin-right: 0;}
}

[suyash1 · Accepted solution]

@markaib 

[PageFly-Victor · Accepted solution]

Hi @markaib . 

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code  and add this code on file style.css

@media only screen and (max-width: 767px){
#Banner-template--14732891652194__16647696112a083fa9 .banner__heading{
margin: 0 auto;   
margin-right: 0;
}
#Banner-template--14732891652194__16647696112a083fa9 .banner__text{
margin: 0 auto;    
margin-right: 0;
}
}

Hope this answer helps.

Best Regards,

PageFly

[markaib]

Thank you @suyash1 and @PageFly-Victor ! Both code worked perfectly! 😄 

[suyash1]

@markaib - welcome, do let me know if you need any more updates, you can DM or message me on my email below.

[bryan76]

Hi Mark.   I am having the same issue you had.  I added your code to the section-image-banner.css and it worked great (thank you) except that on mobile all text is pushed to the left and I need the ones that should be on the right on the right.  I entered the code suggestions on this thread but not working.  Any advice?

(also using Dawn theme that does not have style.css so I tried adding both to the bottom of base.css but the code has no effect on the mobile location of the text.

Thanks in advance!