How can I move the 'Shop Now' button higher on my mobile landing page?

Store Design
1

Good afternoon everyone,

I was hoping someone could help me with my landing page image with text button issue.

On the mobile version of my store the landing page (Above the fold) is an image with text section.

At the moment the SHOP NOW button is resting on the bottom of the screen (see attached image).

I want to move the SHOP NOW button higher so that the bottom of the button is not resting at the bottom of the screen. I would like to see white around all four sides of the button.

I only want to move the button higher, nothing else.

There is a section with a grey background directly below the SHOP NOW button that I DO NOT want to move when the button moves higher.

I have included a picture to show you the section I would like changed.

url:

https://5jg3309ygkaklrdc-54993551588.shopifypreview.com

Thank you for your help.

2

you already have code on line 7746 where you have margin-bottom set to 20, make it 6 and check, or use can copy paste this code, adjust as per the need

@media only screen and (max-width: 749px){
#shopify-section-1644120866612d0b09 .rte-setting {margin-bottom: 6px;}
}
3

Hi @Timstar ,

You can try follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Assets-> /theme.scss.css. Paste code below into end the file.
@media only screen and (max-width: 749px){
.template-index .product-featured-icons-container {
    margin: -5px 0;
}
#shopify-section-1644120866612d0b09 .rte-setting {
    margin-bottom: 5px;
}
#shopify-section-1644120866612d0b09 .feature-row__text a.btn {
    border: solid 1px #fff;
}
}
4

Thank you for your advice. The button is now in the right place.

However the grey section underneath the button has moved up. See Landing page (above fold).jpg

Can you please give me the code to move the grey section down below the fold.

I would like the gap underneath the button before the grey section starts to be double the height of the gap between the 3rd line of text and the top of the button.

see Landing page (below the fold update ).jpg

5

here are pics to explain. thanks

6

Hi @Timstar ,

You can try follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Assets-> /theme.scss.css. Paste code below into end the file.
@media only screen and (max-width: 749px){
.template-index .product-featured-icons-container {
    margin: 20px 0 !important;
}
}