Home Forums Weaver Xtreme Theme WVR X Plus Flex Columns

Topic Resolution: Resolved
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #70912
    ROBIN
    Participant

    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.

    #70914
    scrambler
    Moderator

    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..).

     

    #70917
    hkp
    Participant

    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.

    #70918
    scrambler
    Moderator

    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;}

    #70919
    ROBIN
    Participant

    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!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.