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

[luke8mcm]

This is how my current image banner looks on mobile:

I would like it to look like this:

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. 

No such option exists for mobile.

[websensepro]

Hi, @luke8mcm.

Please kindly share your store URL and password.

[luke8mcm]

odinrecovery.co

[Made4uo-Ribe]

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:
• 

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!

[luke8mcm]

This is how it appears on my end. 

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]

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:

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

[luke8mcm]

This is what it looks like for me.

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 · Accepted solution]

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

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?

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!

[luke8mcm]

This works, thank you very much!