How can I adjust the position of the mobile cart button?

Store Design
,

Topic summary

Mobile add-to-cart button overlaps product images on a Shopify store; desktop layout is fine. Helper requested site access and provided CSS (media queries for ≤1275px and ≤550px) to set buttons fixed, adjust margins, and add grid spacing; shared a result screenshot.

Current status (partially resolved):

  • Mobile (collections): Slight overlap remains; changing margin-top to -10px helps, but images sit too high.
  • Mobile (featured products): Add-to-cart buttons are bunched with no spacing, while “View options” spacing is OK. Wants larger product cards so the image and button are visible without scrolling.
  • iPad/tablet: Mobile CSS doesn’t apply well. Add-to-cart button appears fixed during scroll, overlapping images. On collections, button sits on text; images need a gap (too close to buttons above). Featured products also need larger cards to show image and button together.

Access details: Store URL provided; password set to “seiyud”.

Open items: Further CSS adjustments for tablet/mobile to fix button positioning (avoid fixed overlap), increase card height/spacing, and add gaps between buttons and images. Discussion remains open.

Summarized with AI on January 21. AI used: gpt-5.
1

Hello,

Hope you are doing well !

I’m new on creating a website and I’ve managed to add the cart button and align it on the desktop version but on the mobile version, it’s too low and it goes underneath the image. What code should I use to change this ?

thank a lot in advance for your help !

Karla

Photo 10-08-2023, 22 26 01 (1).jpg
Photo 10-08-2023, 22 26 01 (1).jpg3024×2322 1.26 MB

1 Like
2

Hi @Karla8

Would you mind to share your Store URL website? with password if its protected. Thanks!

3

Hi,

Thanks a lot for your quick reply !

it’s www.hintofhappiness.com

Thank you !

1 Like
4

Sorry, I see only now that I also have an issue in the featured products, the add to cart buttons are all together and there’s no space. thanks you for your help !

5

Thank you for the information. Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (max-width: 1275px){
a.button, input.button {
    position: fixed;
    margin-top: 0px !important;
.product-grid .grid__item {
    margin-bottom: 70px;
}
}
@media only screen and (max-width: 550px){
.card.card--standard.card--media {
    margin-right: 40px;
}
a.button, input.button {
    min-width: 10px;
    margin-right: 20px;
}
}

Result:

Ribe_Dagandara_0-1691705898760.png
Ribe_Dagandara_0-1691705898760.png714×423 83.5 KB

I hope it help.

" :glowing_star: Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! :raising_hands: "

1 Like
6

Many thanks ! It did solve some issues partly.

MOBILE :

In the collections page I still have a little overlap. I changed this

margin-top: 0px !important**;** to -10px and that brought up the add to cart a little but the images are still a little high.

In the featured products I still have the issue between add to carts but between view options it’s ok. Also, would it be possible to make the featured products collection “square” a little bigger. sorry I’m not familiar with the terminology. But basically I have to scroll up in order to be able to see the add to cart buttons and when doing so, I don’t see the full image of the products.

IPAD :

Sorry, I only noticed last night that the mobile solution does not apply to ipad :disappointed_face:

On Featured products, I also need the little square a little bigger so I can see the product and the add to cart. There’s also something really weird, but the add to cart button does not go up and down, it remains in the same position so when I scroll up it overlaps the image

On collections page it need to go a little down as it’s on top of the text and the images need a little gap as currently they are too high (almost touching the add to cart from products above)

Thank you so much for your help ! I appreciate it !

Karla

7

I had to add a password : seiyud