Add to cart button changed to vertical

Site URL: https://www.suemcnenly.com/

Hey all.  My add to cart button in 7.1 all of the sudden changed to vertical.  Can't figure out how to get it horizontal again.

Thanks for any help.

p.s.  I think it used to be horizontal.  It just struck me all of the sudden that it changed to vertical.

Did you ever get a fix for this? It happens to me ALL the time. I don't understand why?

@AnaDavisDesign

Please post the URL to a page where this is happening.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Pockimals.com

The site is public now.

@AnaDavisDesign

I've not seen the vertical button issue before. It looks like a SS bug to me.

Add the follow to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /* work around vertical add to cart button issue */
  
  .ProductItem-details .sqs-add-to-cart-button-wrapper {
  
    display: inline-block;
    width: auto;
    
    }
    
  </style>

Let us know how it goes.

10 hours ago, AnaDavisDesign said:

I have a few other questions, too:

Please start a new thread for these additional issues. It is harder for everyone when there are multiple issues trying to be addressed in the same thread.

Ideally one issue per thread is best. You can create as many threads as needed to address each of your issues.

@AnaDavisDesign

Can I just say I want kitty kat Pockimals! 🙂 LOL!

Thank you @creddon. I will delete the other issues from this thread and create new ones. 

The code injection worked like a charm. TY!

We have a kitty in the works for the second production run! 😄 We are getting closer to publishing the site. The product is due into our warehouse in just a couple weeks. :)))

@creedon the vertical cart button is back on mobile on my site https://pockimals.com/shop/p/pink-tshirt, but the page code injection you gave me is still there... it just stopped working.

I changed the padding around the button, and that fixed the vertical problem, but now it's a very small add to cart button. Any other thoughts? We'd prefer a larger, horizontal button.

Our site is live now, so no password needed. 🙂

Thanks!

@AnaDavisDesign

Someone broke my code by adding the following to it.

google-site-verification=z51nlLuZixGB-8zr5PXdXoQLqEftfawS6scj-aIhZqE

This is not CSS. Remove that and the code will work again. Please remove the added padding as well.

That was me. I can't remember what I was trying to do, but I have since unbroke it. 🙂 Thank you!

Good evening. I finally am getting the layout of my product pages to look the way I want on the desktop version of my site, but when viewing the individual product pages in mobile view, the Add to Cart button becomes vertical. I have tried the code suggestions on this thread, as well as adjusting the text to something shorter, the margins, the padding, and all other things I could think of to no avail. Does anyone here know how I may fix the mobile view to show the Add to Cart button horizontally without breaking my desktop formatting? 

URL: https://laterrarossa.com

Example Product Page: https://laterrarossa.com/shop/p/sumatra-kerinci-pendekar-natural

19 hours ago, laterrarossa said:

Good evening. I finally am getting the layout of my product pages to look the way I want on the desktop version of my site, but when viewing the individual product pages in mobile view, the Add to Cart button becomes vertical. I have tried the code suggestions on this thread, as well as adjusting the text to something shorter, the margins, the padding, and all other things I could think of to no avail. Does anyone here know how I may fix the mobile view to show the Add to Cart button horizontally without breaking my desktop formatting? 

URL: https://laterrarossa.com

Example Product Page: https://laterrarossa.com/shop/p/sumatra-kerinci-pendekar-natural

Find this code in CSS box

.sqs-add-to-cart-button {
    width: 35% !important;
}

change it to

@media screen and (min-width:992px) {
.sqs-add-to-cart-button {
    width: 35% !important;
}
}

@tuanphan That worked, perfectly! Thank you so much. I really appreciate your help.