Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1118797

    Hello, This is a new post
    Reference Info:
    This is the current page. https://plaid.flywheelstaging.com/academics/
    https://snag.gy/6nV0Lo.jpg

    I sorely miss not being able to manage columns with something like Bootstrap. In a template I’m building,
    [ 1/3 column A ] [ 2/3 column B ]

    I want to reorder in mobile so I get this outcome:
    [ 1/1 column B ]
    [ 1/1 column A ]
    In order to rearrange with Flexbox, I’d need to have a row container. I can’t figure out how to get that. I’m not able to add an outer row to add inner columns like you can do with Visual Composer or more broadly, Bootstrap.

    I want to use this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items where the blocks exist in a section or row and I reverse direction on mobile.

    But I can’t seem to find how to contain the two. I tried the switcheroo script, it was not effective for me, referenced below.
    //kriesi.at/support/topic/reverse-column-stacking-order-for-mobile/#post-1117951

    /* Switcheroo script provided by participant @davidkfry */
    @media screen and ( min-width: 768px ) {
      .switcharoo .av_one_half.avia-builder-el-first {
        left: calc(50% + 30px);
        }
      .switcharoo .av_one_half.avia-builder-el-last {
        right: calc(50% + 30px);
        }
      }
    
    • This topic was modified 5 years, 5 months ago by shrinkray.
    #1119312

    What would the Enfold Devs say to adding classes that I style with CSS Grid template columns. I do not need an Enfold solution as I could manage this from classes in the child theme. What do you think?

    Codepen Demo
    https://codepen.io/shrinkray/pen/vqoPyQ

    #1119450

    Hi,

    You can apply the flex property to the entry-content-wrapper container. That’s the immediate parent container of the columns.

    #customSection .entry-content-wrapper {
       display: flex;
       flex-direction: row;
    }

    The #customSection is the Section ID of the color section containing the columns. And according to the documentation, you can sort the columns like this:

    #customSection .flex_column:nth-child(1) { order: 2; }
    #customSection .flex_column:nth-child(2) { order: 1; }
    

    Of course you have to wrap the code in a css media query if it’s intended for mobile devices or smaller screens.

    Best regards,
    Ismael

    #1119588

    @Ismael, thank you for researching and providing this thoughtful response.

    Please close the ticket.

    Shrinkray

    #1119650

    Hi Shrinkray,

    Glad Ismael could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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