how to center "add to cart" button on a mobile

What is your URL?

https://www.scrapbookingdelights.com.au

In your Child Theme or CSS Editor Plugin try this code:

.woocommerce-page ul.products li.product {
    text-align: center;
}

*Note
If your theme has a custom CSS Editor in it, you can also paste the code in there.

Never edit core CSS or PHP files under Appearance > Editor. Your edits will be deleted when the theme is updated.

Thanks, my website on a computer and ipad are centered but it is still not centered on a mobile phone device, it aligns to the left, thanks

Hi ??

In your Custom CSS, locate this rule:

/*woocommerce this centres the add to cart button under products*/
.woocommerce ul.products li.product a,
.woocommerce-page ul.products li.product a
{margin:0 0 0 5%; min-width:100px; width: 50%)
}

The closing bracket should be removed after 50%:

)

Try the following to resolve your main question:

@media (max-width: 480px) {
	body.responsive.woocommerce-page #container ul.products li.product {
	    text-align: center;
	}
}

Thanks Misplon, should there be a ; where the bracket was?
Ive fixed that and i tried your suggestion: @media (max-width: 480px) {
body.responsive.woocommerce-page #container ul.products li.product {
text-align: center;
}
}
but nothing changed on the mobile, it just seems nothing i try works on the mobile, it looks like woo commerce is very responsive to mobiles. I’d love to try and get it fixed somehow. thanks

There can be a ; but as the last declaration in the rule there doesn’t have to be.

The new rule isn’t working because a rule above it is breaking the cascade:

@media screen and (max-width: 960px){
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {
width: 46% !important;
min-height: 420px;
}

The above is missing a closing bracket. It shoudl read:

@media screen and (max-width: 960px) {
	body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {
		width: 46% !important;
		min-height: 420px;
	}
}

Thanks I fixed that and tried again but still no joy, thanks

If you make your site public again we could take another look.

Sorry I had to go to bed, I’m just trying to help a friend finish this website and she doesn’t like it live in case someone goes into the shop and purchases something. As its not a live website yet. But I’ve turned it back on now for a little while, you’re help us greatly appreciated, thank you

Thanks ?? Taking a look now.

WooCommerce has a demo mode you can use, it’s somewhere in the WooCommerce settings section.

You can try testing my latest rule at the top of your Custom CSS. I’m not sure if there are further errors but just above the rule in question, near the bottom of your Custom CSS you’re saying:

/* adjusting the responsive theme to suit an ipad landscape and potrait */

  @media (min-width: 768px) and (max-width: 1024px) {
  body.responsive.woocommerce-page #container ul.products li.product {
    width: 240px;
    float: none;
    margin-right: auto;
    margin-left: auto;
  }
  body.responsive.woocommerce-page #content div.product div.images,
  body.responsive.woocommerce-page #content div.product div.summary {
    float: none;
    width: auto;
  }
  body.responsive.woocommerce-page table.shop_table td,
  body.responsive.woocommerce-page table.shop_table th {
    padding-left: 3px;
    padding-right: 3px;
  }

Notice the opening bracket for the media query and no closing bracket. This will effectively break everything below.

I did add a closing bracket last night in this code to see if it made a difference but it didn’t, but I was placing the closing bracket at the very end, was that the correct place to put it?
I will go ahead now and do it again and I will try your rule at the top, thanks

Also i’m trying to find a demo mode in the settings, without much luck at the moment, thanks again for your time

At its basic a media query must follow this format:

@media (max-width: 680px) {

/* All our rules go here, our rules have opening and closing brackets. But so does our query.

}

Try my rule at the top of Custom CSS:

@media (max-width: 480px) {
	body.responsive.woocommerce-page #container ul.products li.product {
	    text-align: center;
	}
}

We’re back on tomorrow. GMT+2.

I did that thanks and it that did work in portrait mode but it still is left aligned in landscape mode on the mobile, thanks