Aligning text of mobile image banner Dawn Theme

Solved

Aligning text of mobile image banner Dawn Theme

markaib
Excursionist
17 0 2

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

 

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! 🙂

Accepted Solutions (3)

suyash1
Shopify Partner
9587 1199 1540

This is an 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;}
}
Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

suyash1
Shopify Partner
9587 1199 1540

This is an accepted solution.

@markaib 

suyash1_0-1665462837718.png

 

Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

PageFly-Victor
Shopify Partner
7865 1785 3079

This is an 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

View solution in original post

Replies 6 (6)

suyash1
Shopify Partner
9587 1199 1540

This is an 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;}
}
Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
suyash1
Shopify Partner
9587 1199 1540

This is an accepted solution.

@markaib 

suyash1_0-1665462837718.png

 

Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

PageFly-Victor
Shopify Partner
7865 1785 3079

This is an 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
Excursionist
17 0 2

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

suyash1
Shopify Partner
9587 1199 1540

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

Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

bryan76
Trailblazer
231 4 47

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!