Moving the position of a button on landing page

Solved

Moving the position of a button on landing page

majaa
Visitor
2 0 1

Hi,

 

How do I adjust the button size (so it's bigger), and position on the image banner landing page for Shopify Dawn theme?

 

see below in red. 

 

URL: https://sixinch.com.au/

pass: reapis

 

majaa_0-1728912958952.png

 

 

 

Accepted Solution (1)

Tech_Coding
Shopify Partner
384 106 90

This is an accepted solution.

Hello @majaa 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
     .banner__content.banner__content--middle-center.page-width {
         position: relative;
     }
     .banner--desktop-transparent .banner__box {
         position: absolute;
         top: 20%;
         left: 10%;
    }

    .banner__buttons a {
        padding: 0 6rem !important;
    }
}
</style>

Tech_Coding_0-1728918029147.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Replies 3 (3)

Tech_Coding
Shopify Partner
384 106 90

This is an accepted solution.

Hello @majaa 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
     .banner__content.banner__content--middle-center.page-width {
         position: relative;
     }
     .banner--desktop-transparent .banner__box {
         position: absolute;
         top: 20%;
         left: 10%;
    }

    .banner__buttons a {
        padding: 0 6rem !important;
    }
}
</style>

Tech_Coding_0-1728918029147.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
majaa
Visitor
2 0 1

This works - thank you so much. 

devcoders
Shopify Partner
382 58 93

Hello @majaa 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.

 

@media screen and (min-width: 750px) {
.banner__content.banner__content--middle-center.page-width {
position: relative;
}
.banner--desktop-transparent .banner__box {
position: absolute;
top: 20%;
left: 10%;
}

.banner__buttons a {
padding: 0 6rem !important;
}
}

devcoders_0-1728921073417.png

 

 

 

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!