Dawn Theme - Banner Desktop/Mobile alignment (pictures included)

Store Design
1

Hi Guys,

I’m currently struggling with a banner on the dawn theme.

To make it short-> Desktop looks perfect (see below “desktop1”)

However, on the mobile version the buttons with the white backround moves down. Then it looks too big.

My first preferable solution is → let the banner look the same on mobile → Just scale it down (see “version1” below)

My second preferable solution is → Shrink the Banner on mobile, because its just to much space (see “version2” below)

Would love to get some help :slightly_smiling_face:

thank you guys!

sirorudo_0-1644858048490.png
sirorudo_0-1644858048490.png1390×616 206 KB

Solutions:

Version1:

sirorudo_1-1644858384363.jpeg
sirorudo_1-1644858384363.jpeg316×378 13.5 KB

Version2:

sirorudo_2-1644858403308.jpeg
sirorudo_2-1644858403308.jpeg344×366 15.4 KB

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

https://pipundpavel.de/

pw: 123

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media screen and (max-width: 749px){
.banner .banner__content.banner__content--middle-right.page-width {
position: absolute;
width: 50%;
right: 0;
}

.banner .banner__content.banner__content--middle-right.page-width .banner__box {
padding: 30px 8px;
}
.banner .banner__content.banner__content--middle-right.page-width .banner__box .banner__buttons a.button.button--primary {
padding: 0 5px;
min-height: 31px;
}

.banner .banner__content.banner__content--middle-right.page-width .banner__box h2.banner__heading.h1 {
font-size: 20px;
}

.banner {
align-items: center;
}
}
5

Perfect, thank you much!

1 Like
6

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.