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

Store Design
, , ,
1

This is how my current image banner looks on mobile:

Screenshot 2023-11-28 at 12.23.04 am.png
Screenshot 2023-11-28 at 12.23.04 am.png760×788 287 KB

I would like it to look like this:

Screenshot 2023-11-28 at 12.23.30 am.png
Screenshot 2023-11-28 at 12.23.30 am.png784×906 455 KB

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
Screenshot 2023-11-28 at 12.25.27 am.png568×152 3.82 KB

No such option exists for mobile.

1 Like
2

Hi, @luke8mcm .

Please kindly share your store URL and password.

3

odinrecovery.co

4

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

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!

1 Like
5

This is how it appears on my end.

Screenshot 2023-11-29 at 6.59.28 pm.png
Screenshot 2023-11-29 at 6.59.28 pm.png786×918 381 KB

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.

1 Like
6

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
Made4uoRibe_0-1701269743146.png540×315 136 KB

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

7

This is what it looks like for me.

IMG_8007.PNG
IMG_8007.PNG828×1792 159 KB

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’?

1 Like
8

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

Made4uoRibe_0-1701356822047.png
Made4uoRibe_0-1701356822047.png456×235 57.1 KB

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
Made4uoRibe_2-1701357046330.png413×248 50.2 KB

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!

9

This works, thank you very much!

1 Like