Re: how to adjust the button "add to cart" on mobile phone

Solved

how to adjust the button "add to cart" on mobile phone

PeaceDoe
Tourist
14 0 2

hello, yesterday I asked question in the community about how to adjust position "add to cart" button on website

i got the answer like this :

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;
}
}

 

on my computer website, i see the button is tidy 

but on my mobile phone ,my store change like this

problem1.png

 

problem2.png

 

There is a huge gap in the middle of the button

my shopify store theme is dubet

my shopify store url is :

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

please tell me what should i do to adjust the add to cart button on mobile phone 

thank you very much and have a nice day : )

Accepted Solution (1)

Hardik29418
Shopify Partner
2913 418 1083

This is an accepted solution.

Hello,

Welcome to the shopify Community.

Please  remove old given code.

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-collection .page-width .grid .grid__item {
position: relative;
min-height: 450px;
}

#shopify-section-collection .page-width .grid .grid__item form {
position: absolute;
bottom: 0px;
margin-bottom: 15px;
}

@media only screen and (max-width: 768px) {
#shopify-section-collection .page-width .grid .grid__item {
min-height: 350px;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 3 (3)

Hardik29418
Shopify Partner
2913 418 1083

This is an accepted solution.

Hello,

Welcome to the shopify Community.

Please  remove old given code.

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-collection .page-width .grid .grid__item {
position: relative;
min-height: 450px;
}

#shopify-section-collection .page-width .grid .grid__item form {
position: absolute;
bottom: 0px;
margin-bottom: 15px;
}

@media only screen and (max-width: 768px) {
#shopify-section-collection .page-width .grid .grid__item {
min-height: 350px;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
PeaceDoe
Tourist
14 0 2

well, i got you answer and solve the problem : )

Thank you very much and have a nice day!

Hardik29418
Shopify Partner
2913 418 1083

@PeaceDoe  Thank you for the update.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email