Is it possible to center a raw content element?

[cdbehrle]

Specifically I am trying to enter a woocommerce shortcode for a single product ID into a content area and am finding it impossible to display centered- is displays in the left side of the element no matter what- html/css I’ve tried a bunch of things - I have also tried adding as a content modal - item still displays shoved over to left.

here is the page I am trying to lay out
https://carladawnbehrlenyc.com/custom-made-leather-jeans-start/

the first section is a gallery in a content area, it is perfectly centered nothing else needed.

the content areas i am testing the woocommerce shortcodes in are right below that -a single content section and a content modal

Here is how products display on a shop category page - also on the product slider on my front page - all centered!

Made-to-Order Leather Clothing by Carla Dawn Behrle

each item displays centered within each of the 3 columns - I even tried placing the content area in the center column of a row- it still shoved left! This SIMPLE desire (centering) has just eaten up 3 hours of my evening and I have been unable to solve…

Also in cornerstone, high lighting outlines of rows and sections etc tends to overlap badly and jump around when hovering to see where I am in layout, when working visually- not in framework view- so confusing and I have accidentally deleted good sections because of this- In large areas of cornerstone I feel like I may as well be working blind- is there, will there be, a fix for this?

please I’ve stuck with x for a long time, honestly looking at other options at this point and NOT looking forward to recreating site. Please Tell me there an update in works that will simplify things like centering content elements and be more intuitive???

thank you

[basanta]

Hi There,

Thanks for writing in!
Centering content or element in a column is easy. You can just make them . column text-aligns center.

In your case, the woo-commerce product having its own CSS, which is causing the issue.
Please add this CSS to your theme option Global CSS and let us know how this goes.

.x-column ul.products {
text-align: center;
margin: 0px;
}
.x-column ul.products .product {
 float: none;
 display: inline block;
}

For the content area modal, if you make the Column text-align center, as mentioned above, it will be center.

Hope this helps!

Thanks

[cdbehrle]

Thank you I will try that Css- I tried the centering that you note at all levels- column, element etc- it just refused to work!

I will let you know how the CSS works

[cdbehrle]

I placed that CSS into my global CSS and I am very sorry to say it does not work!

Arrrghhh!!!

[cdbehrle]

The woo content is centerd in both slider and categoy views, I don’t get it?
Now I am having trouble getting rid of the container on a new section- even though my layout is full width- I really don’t understand why things get so buried in X/cornerstone that I have to keep looking up here- that’s simply not user friendly!

Sorry! -I found it- I am so fried on this I had the wrong settings- really bad getting fried on a website builder!

[nabeel]

Hi again,

The reason it wasn’t working before is due to the cached content, I see the content is being served by the cache. Always make sure to clear your plugin’s cache after making any change so you see the change on the front-end right away. It’s best to disable cache plugins / optimization services if you’re developing your site.

Hope this helps!