How to adjust position add to cart button?

Technical Q&A
1

Hello，please help me

I want to adjust “add to cart” button ,because it look untidy

Like this in the picture

I used theme is debut

Please tell me how to adjust these button on web and molibe phone.

75cd6883ddd9b877b16f35e729140e8.png
75cd6883ddd9b877b16f35e729140e8.png1274×793 98.4 KB

2

Hi @PeaceDoe , please share your website url.

3

hello @PeaceDoe Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

1 Like
4

This is website url

https://8ebr5g11vrsdzpz9-56140005553.shopifypreview.com/

Thank you very much and have a nice day: )

5

This is website url

https://8ebr5g11vrsdzpz9-56140005553.shopifypreview.com/

Thank you very much and have a nice day: )

6

This is website url

https://8ebr5g11vrsdzpz9-56140005553.shopifypreview.com/

Thank you very much and have a nice day: )

7

@PeaceDoe , you can add this code at the end of your CSS file (Themes → Edit code → Assets → theme.css )

.grid__item {
    position: relative;
    min-height: 450px;
}

.grid__item form {
    position: absolute;
    bottom: 0px;
    margin-bottom: 15px;
}

@media only screen and (max-width: 768px) {
  .grid__item {
    min-height: 350px;
  }
}
2 Likes
8

hello @PeaceDoe
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.grid__item {
    position: relative;
    min-height: 450px;
}
.grid__item form {
    position: absolute;
    bottom: 0px;
    margin-bottom: 15px;
}

@media only screen and (max-width: 769px) {
  .grid__item {
    min-height: 350px;
  }
}
2 Likes
9

yep,i can solve the problem ,thank you very much and i click “like” for you answer !

1 Like
10

thank you very much!on my computer website page,i can see the button tidy,but on my mobile phone,the website have some problem,please tell me what should i do,have a nice day : )

1 Like
11

hello @PeaceDoe

can you please remove the code insert into yesterday and insert this code shown below

@media only screen and (min-width: 769px) {
#shopify-section-collection .grid__item {
    position: relative;
    min-height: 450px;
}
#shopify-section-collection .grid__item form {
    position: absolute;
    bottom: 0px;
    margin-bottom: 15px;
}
}
@media only screen and (max-width: 768px) {
 #shopify-section-collection .grid__item {
    position: relative;
    min-height: 400px !important;
}
#shopify-section-collection .grid__item form {
    position: absolute;
    bottom: 0px;
    margin-bottom: 20px !important;
}
  }
12

i got it and i well try to solve the problem, thank you very much