Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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 : )
Solved! Go to the solution
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;
}
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;
}
well, i got you answer and solve the problem : )
Thank you very much and have a nice day!
@PeaceDoe Thank you for the update.
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025