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

Store Design
,
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