Aligning text of mobile image banner Dawn Theme

Store Design
1

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

1.png
1.png371×612 210 KB

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! :slightly_smiling_face:

2

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

@markaib

suyash1_0-1665462837718.png
suyash1_0-1665462837718.png1366×768 252 KB

4

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

5

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

1 Like
6

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

1 Like
7

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!