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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025