Adjust the button sizes on Homepage

[liu_x_trujillo1]

Hi,

I need some help to make adjustments to the buttons on my homepage:

- On the mobile version, I'd like to move buttons up a bit on the Hero Banner and Collections.

- On the desk version, move the buttons of Collections a bit lower so they don't cover any part of the images. I'd also like to make sure that the buttons aren't too low on the mobile version.

My site is www.embroidtale.com. Thanks.

[brandography]

Hi @liu_x_trujillo1 , this will likely require some theme customization to achieve the look you are wanting. A quick solution could be to edit your images with negative space to accommodate the buttons to overlay correctly.

[Made4uo-Ribe · Accepted solution]

Hi @liu_x_trujillo1 

I think we already tackled this one. 

I would move on 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 "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media screen and (min-width: 1000px) {
  .collection-list.wrap .content-over-media {
    --content-over-media-gap: 1rem;
  }
}
</style>

And save. 

result:

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

[liu_x_trujillo1]

You are awesome! Thank you!