WVR X Plus Flex Columns

[ROBIN]

This is by far my favorite Widget. It saves me so much time and stress.

I used it on the home page of 2sticky.com . The grey area towards the bottom has 3 boxes inside of it.
This is how I have it set up, It is (Widget 8)

Column Layout and Widths
Columns per row:
3 – Equal Width

Responsive Layout Trigger Widths:
Min width of Desktop:
768
px Min width of Tablet:
581
px
Style Options for this Widget Instance
You can use multiple Flex Columns Widgets in the same Widget Area for more control of column layouts.

Flex Justify Content:
Space Around [·□·□·□·]
– Automatic
horizontal spacing when columns in a row total less than 100% – (e.g., 32%,32%,32%). An alternative to using the Left/Right Spacing option.
Flex Direction:
In Rows
– In Rows most typical
Flex Align Items:
Center
– Stretch makes equal height rows

I have changed Flex Justify Content to every setting and I can’t get the 3 boxes to line up equally in the grey area. It is like I need more grey on the left side of the first box.    Do you have any suggestions?

Thank you for any help you can offer.

[scrambler]

I don’t seem to see what you describe.

I see three white boxes perfectly centered in the grey area, with the exact same space on the left of the first (Stock message tape ..) than on the right of the 3rd (Custom printed tape..).

 

[hkp]

To confirm the issue, this is a link to a screen capture of what I see on Firefox:

https://www.dropbox.com/s/lers14dj4ljwjag/Untitled.png?dl=0

Regards.

[scrambler]

Interestingly enough I now see the problem.

It comes from the fact that the white boxes are not centered inside the widgets.

You can fix that by adding the rule below

#wvrx_columns-8 .wvrx-flex-cols {text-align:center;}

You may be able to only  put the CSS property inside the Widget “Custom CSS for all text boxes” Box

{text-align:center;}

[ROBIN]

Thank you Scrambler and hkp.  Putting the align:center in the CSS property worked great.  I had used positioning in my code but it didn’t move anything, this did the trick!

[Author]

Posts