Dawn - Change button position only on mobile

Store Design
, , , , ,
1

Hi,

On homepage only on desktop, i want the title & subtitle to be in the middle height of the banner (without changing the position of the button)

On homepage only on mobile, i want to lower just a little the main button

Thanks for your help

1 Like
2

Hi @Alex087

Like this?

Made4uoRibe_0-1694538686177.png
Made4uoRibe_0-1694538686177.png1048Ă—476 130 KB

If it is try this.

  • 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 (min-width:749px){
.banner__content.banner__content--bottom-center.page-width {
    justify-content: center !important;
}
.banner__content.banner__content--bottom-center {
    align-items: center !important;
}
.banner__buttons {
    position: absolute;
    left: 0px;
    padding-top: 70px;
}
}
  • And Save.

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

3

hi Made4,

The new height is correct, but the alignement right left should be same as before,

thanx

1 Like
4

Oh, I made it critical.. :laughing:

Like this?

Made4uoRibe_0-1694540941394.png
Made4uoRibe_0-1694540941394.png752Ă—434 64 KB

If it is. Please replace the code to this.

.banner__content.banner__content--bottom-center {
    align-items: center !important;
}
.banner__text.rte.subtitle {
    margin-bottom: 25%;
}

Same Instruction.

And Save.

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

5

Thanks Made4, would you know how to lower just a bit the home page button BUT only on mobile?

1 Like
6

Yeah, try this one.

Note you can adjust the size.

Same Instruction.

@media screen and (max-width: 767px)
h2.banner__heading {
    margin-bottom: 60px !important;
}

And Save.

Result:

Made4uoRibe_0-1694543765935.png
Made4uoRibe_0-1694543765935.png647Ă—375 134 KB

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

1 Like
7

this is not working, i’ve adjusted but the button is still not moving on mobile…

1 Like
8

Please, replace that code into this code.

@media only screen and (max-width: 749px){
.banner__box>*+.banner__buttons {
    padding-top: 30px;
}
}

And Save.

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

9

Thanx Made4it worked!

  • Would you know how to increase the subtitle size on homepage?

  • This subtitle (photo)on the product page, I would like bigger & bold.

Thanks in advance

Screenshot 2023-09-13 at 09.09.33.png
Screenshot 2023-09-13 at 09.09.33.png2276Ă—754 218 KB

10

Good to hear then, would you mind to share the password of your Store? I cnat see it on the previous posting. Thanks!

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

11

Hi Made4

thanx in advance

1 Like
12

Try this one. Same Instruction.

#ProductInfo-template--19674055147849__main > p.product__text.inline-richtext.caption-with-letter-spacing > font > font {
    font-size: 12px;
}

And Save.

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

13

this one is not working