CODEWITHSUNDEEP
csswordpresswoocommerce
McBooley
McBooley

Reputation: 433

How to align the product page in WordPress?

I'm creating a website with WordPress and wanted to center the elments on this page: https://www.web-demo-site.eu/trgovina/trepalnice-004-c/

I've tried things like:

But nothing seems to work. Currently I have:

#content div.product.type-product{
    margin-left: 20%;
}

Which works, but not correctly since it's not aligned well on all devices. Is there a way to align the content on the Product Page from Woocommerce ?

Upvotes: 0

Views: 1572

Answers (1)

agustin
agustin

Reputation: 2387

One way to archive this is:

  1. Removing the margin-left from #content div.product.type-product.
  2. Adding display: flex and justify-content: center to .single-product .woocommerce-container.

Another way is removing the float, and adding a margin: 0 auto to .single-product .woocommerce-container #content

Solution 1:

.single-product .woocommerce-container {
    display: flex;
    justify-content: center;
}

Solution 2:

.single-product .woocommerce-container #content {
    float: none;
    margin: 0 auto;
}

You can add the CSS to the Customizer, or your child theme's CSS.

Upvotes: 1

Related Questions