How to centre Add to Cart Buttons

.edd_purchase_submit_wrapper {
    position: relative;
    left: 42%; /* Adjust */
}

That’s great thanks so much

Actually I need help again. Its lines up nicely on the pages I don’t have columns but the 2 pages with columns its a little off center. On these pages can i adjust it so its more centered?

https://www.foodandbeveragetrainer.com/food-and-beverage/
https://www.foodandbeveragetrainer.com/guest-service/

Yes. The code at moment changes every orange button on every page so if you adjust 42%, it will effect every page. So if you need to treat it different on similar pages then append the page-id-##. To get that, rt-click on the web page and select Inspect Element. You’ll see the page-id-## on the [body] tag in the HTML. So F&B is page-id-15. Then change the CSS to:

.page-id-15 .edd_purchase_submit_wrapper {
    position: relative;
    left: 42%; /* Adjust */
}

and adjusting 42% will only impact that page.

Hi Rdell,

I have just had a look at my website on mobile phone and the pages I have the add to cart buttons are moved to one side (left side). Do you have a solution for this.

Thanks again.
Ursula

You need to use @media in your css. Something like:

@media all and (max-width:599px) {
.page-id-15 .edd_purchase_submit_wrapper {
    position: relative;
    left: 42%; /* Adjust */
}
}

Hi Rdell,

I placed the page ID # in the CSS and that has worked thanks so much for that but regards the 3 pages that I have done this for I have also tried with the @media all etc. to make the page fit nicely on the mobile device but its not working.

I am just having issues w the 3 pages I have adjusted accordingly.

https://www.foodandbeveragetrainer.com/job-descriptions/
https://www.foodandbeveragetrainer.com/food-and-beverage-forms/
https://www.foodandbeveragetrainer.com/training-packages/

Thank
Urs

I’ve just used the FF Responsive Design View at 360 x 640 on the Job Desc page and had to adjust to left: 27%; to center it at that viewport size.

Can’t see any evidence of you using the @media block anywhere, either CustomCSS panel or preferably Child Theme style.css (which is empty except for headings).

You will end up with a bunch of @media code at the bottom of your style.css to cover different viewports/devices. The 599px above adjusts for anything smaller than a 800×600 tablet, but an iPhone 6+ may need different code to iPhone4 (see here). You have to make the call on how many to include (and it’s one of my least favourite decisions!)

Sorry that’s because i removed it.

I have put back the following codes but still no change. I think I have done it wrong.

I just need your suggestion 599px as on tablet its fine. The difference is on table it shows the side panel but on phone it does not except i think its made the space for it on those 3 pages which is not what I want. I want all pages to be the same layout on phone.

Thanks for your patience.

In my css it looks like this

.page-id-165 .edd_purchase_submit_wrapper {
position: relative;
left: 42%; /* Adjust */
}

.page-id-52 .edd_purchase_submit_wrapper {
position: relative;
left: 42%; /* Adjust */
}

.page-id-162 .edd_purchase_submit_wrapper {
position: relative;
left: 42%; /* Adjust */
}

@media all and (max-width:599px) {
.page-id-165 .edd_purchase_submit_wrapper {
position: relative;
left: 42%; /* Adjust */
}
}

@media all and (max-width:599px) {
.page-id-162 .edd_purchase_submit_wrapper {
position: relative;
left: 42%; /* Adjust */
}
}

@media all and (max-width:599px) {
.page-id-52 .edd_purchase_submit_wrapper {
position: relative;
left: 42%; /* Adjust */
}
}

You’re nearly there. Here’s the change for p162:

@media all and (max-width:599px) {
.page-id-162 .edd_purchase_submit_wrapper {
position: relative;
left: 26%; /* Adjust */
}
}

Hooray I got it to work when mobile is lengthways by putting 0% however when you turn the mobile sideways it still has the problem.

Also do you know how I can center my link buttons and you tube vids on the mobile view. PC is fine.

Thanks again for your patience.

All sorted I had to use columns ??