Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 15, 2019 at 3:22 pm #1118797
    shrinkray

    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, 4 months ago by shrinkray.
    July 17, 2019 at 12:14 am #1119312
    shrinkray

    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

    July 17, 2019 at 8:28 am #1119450
    Ismael

    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

    July 17, 2019 at 2:25 pm #1119588
    shrinkray

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

    Please close the ticket.

    Shrinkray

    July 17, 2019 at 6:31 pm #1119650
    Victoria

    Hi Shrinkray,

    Glad Ismael could help :)

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

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