How can I adjust the 'Shop Now' button on the Dawn theme?

[MrGolfer_1]

Hello,

I am ready to launch my store, but I noticed that the shop now button is a mess. The mobile version is too big, too high and covers the text on my banner. And on the desktop it’s too low and when I adjust it to the middle it covers my text. I am using the Dawn theme and my website for now is https://2cdb36-2.myshopify.com/

Thank you for your help.

[Made4uo-Ribe]

Hi @MrGolfer_1

Try 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--content-align-mobile-left .banner__box {
    align-self: flex-end;
}
}

• And Save.
• Result:
• 

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

[MrGolfer_1]

Hello,
I made a change to the banner, I think it looks better. I just need to move the button down a bit more and can you make it smaller please? Thanks.

[Made4uo-Ribe]

Try this one.

Same instruction.

@media only screen and (max-width:749px){
a.button.button--primary {
    min-height: 3.5rem;
}
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    padding-bottom: 20px;
}
}

And Save.

Result:

Note: You can adjust the sizes.

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

[MrGolfer_1]

Hey Made,
For some reason the shop now button has come up into the text again. I tried to adjust the numbers from the code you gave me but all that does it shrink the top of the button, it doesn’t work for me. Can you please readjust it or show me which numbers I need to change? thanks.

[MrGolfer_1]

Here is the code.