Adjusting image banner content position and spacing on mobile - Dawn theme

Solved

Adjusting image banner content position and spacing on mobile - Dawn theme

luke8mcm
Tourist
7 0 4

This is how my current image banner looks on mobile:

Screenshot 2023-11-28 at 12.23.04 am.png

I would like it to look like this:

Screenshot 2023-11-28 at 12.23.30 am.png

To do so, I need help figuring out how to shift the content to the bottom left of the page and reduce the spacing between the items. The image banner looks fine on the desktop as, on the Dawn theme, I am given the option to choose where the content is positioned. 

Screenshot 2023-11-28 at 12.25.27 am.png

No such option exists for mobile.

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6827 1630 2009

This is an accepted solution.

Im not sure, Do you like to add the space below the Discover Resilience?

Made4uoRibe_0-1701356822047.png

The code:

 

@media only screen and (max-width: 749px){
.banner__text.rte.subtitle {
    margin-bottom: 10px !important;
}
}

 

And Save.

 Or not adding just lesser the space above the Discover Resiliennce?

 

Made4uoRibe_2-1701357046330.png

The code. 

 

@media only screen and (max-width: 749px){
.banner__text.rte.subtitle {
    margin-top: -10px !important;
}
}

 

And save. 

 

You can adjust the sizes. Im not sure what you needs so I give some option. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 8 (8)

websensepro
Shopify Partner
1053 149 156

Hi, @luke8mcm.

 

Please kindly share your store URL and password.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
luke8mcm
Tourist
7 0 4

odinrecovery.co

Made4uo-Ribe
Shopify Partner
6827 1630 2009

Hi @luke8mcm 

Check this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 749px){
.banner__box.content-container.content-container--full-width-mobile.color-inverse.gradient {
    align-self: flex-end !important;
}
.banner__text.rte.subtitle {
    margin-top: 0px !important;
}
.banner__content .banner__buttons {
    margin-top: 5px;
}
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1701125814279.png

     

Is this enough? Or do you like to more down? Because the name of the product covered with the text. Let me know. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
luke8mcm
Tourist
7 0 4

This is how it appears on my end. 

Screenshot 2023-11-29 at 6.59.28 pm.png

I would prefer for the text and the buttons to be slightly closer together, as per the image in the original post.

I don't mind about covering the logo as I am looking to change the home page image soon anyways.

Made4uo-Ribe
Shopify Partner
6827 1630 2009

Check this one again, 

Same Instruction. 

 

@media only screen and (max-width: 749px){
.banner__box.content-container.content-container--full-width-mobile.color-inverse.gradient {
    align-self: flex-end !important;
}
.banner__text.rte.subtitle, .banner__content .banner__buttons {
    margin-top: 0px !important;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1701269743146.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
luke8mcm
Tourist
7 0 4

This is what it looks like for me.

IMG_8007.PNG

Definitely an improvement. Can the 'discover resilience' bit please be brought up slightly such that it is halfway between 'shop now' and 'embrace the ice'?

Made4uo-Ribe
Shopify Partner
6827 1630 2009

This is an accepted solution.

Im not sure, Do you like to add the space below the Discover Resilience?

Made4uoRibe_0-1701356822047.png

The code:

 

@media only screen and (max-width: 749px){
.banner__text.rte.subtitle {
    margin-bottom: 10px !important;
}
}

 

And Save.

 Or not adding just lesser the space above the Discover Resiliennce?

 

Made4uoRibe_2-1701357046330.png

The code. 

 

@media only screen and (max-width: 749px){
.banner__text.rte.subtitle {
    margin-top: -10px !important;
}
}

 

And save. 

 

You can adjust the sizes. Im not sure what you needs so I give some option. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
luke8mcm
Tourist
7 0 4

This works, thank you very much!