WooCommerce Shortcode Centering

[SuitedCreative]

Hello-

We are suddenly unable to place single products in columns with the text element in pro. That, or they were always aligning left, and its just harder to see when we have a 4 column row (like on the client’s ‘Convertible Clothing’ page: https://shawldawls.com/convertible-clothing/)
The shop pages here: www.shawldawls.com work fine or at least ‘look’ better; when we use the same shortcode on pages where we do not want a ‘4 up’, but need to list specific products by id, they all align left, and we need them to center.

screenshot of single product (not centering/looking good): https://drive.google.com/file/d/130HpCS24kx4jHRZ8DmKU9Td-AFELtqE5/view?usp=sharing

screenshot of same shortcode being used in 4-column row: https://drive.google.com/file/d/1YRoO3ZeDhIgcXHTQQbO3UT76LRLrDOLG/view?usp=sharing

Help?

[Prasant]

Hello @drewmooredesign,

Thanks for asking.

To center align the products, please try inspecting the Column and under Formatting > Text Align click Center icon.

Another option with regards to the problem that the middle element is having is to add following CSS under Customize > Element CSS of text element:

$el{margin-right: 20px !important;}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.