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)

BSSTech-Venture
Shopify Expert
460 116 131

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 2 (2)

BSSTech-Venture
Shopify Expert
460 116 131

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

trendycustomapp
Visitor
3 0 2

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