Solved

Mobile App View to large to use add to cart

trendycustomapp
Visitor
3 0 2

I have been told that when you use the mobile app view you can't see the add to cart button. I have screen shots #1 shows the add to cart button is way to far over to the right, this only happens on any of the items I have custom fields on. #2 shows that the add to cart button is on the item correctly. I added and app called Ez Product & Options & Variants, I have been working to get this fixed. Can anyone help me fix this issue, it is causing sale losses daily. The help would be much appreciated 

 

IMG_7723.PNG

IMG_7724.PNG

Accepted Solution (1)

BSSCommerce-HDL
Shopify Expert
733 244 255

This is an accepted solution.

Hi @trendycustomapp ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BssTechVenture_0-1715703940493.png

Step 2: Search file base.css, theme.css or styles.css

BssTechVenture_1-1715704046309.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

@media only screen and (max-width: 767px) {
  .product-form__actions .flex { 
        display: inline-flex !important;
  }
}

button.sf__btn.sf__btn-secondary {
  color: #d38c05 !important;
}

 

Here is result: 

BssTechVenture_2-1715704104879.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Expert
733 244 255

This is an accepted solution.

Hi @trendycustomapp ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BssTechVenture_0-1715703940493.png

Step 2: Search file base.css, theme.css or styles.css

BssTechVenture_1-1715704046309.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

@media only screen and (max-width: 767px) {
  .product-form__actions .flex { 
        display: inline-flex !important;
  }
}

button.sf__btn.sf__btn-secondary {
  color: #d38c05 !important;
}

 

Here is result: 

BssTechVenture_2-1715704104879.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
trendycustomapp
Visitor
3 0 2

Oh my it worked!!! Thank you so much you just made my day 😁