Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1140596

    Hi there. I cant find the reason why this stopped working. I checked everything i could think off, can you provide any direction on what o look for? sections where flipping on mobile fine. Columns are set to equal height.. all i did (i think) was replace the image elements inside the columns.

    On quick css

    @media only screen and (max-width:767px){
         #top.page-id-2   #av_section_3 .entry-content-wrapper {
            display: flex;
            flex-direction: column-reverse;
        }
    }
    @media only screen and (max-width:767px){
        #top.page-id-18   #av_section_1 .entry-content-wrapper,
         #top.page-id-18   #av_section_3 .entry-content-wrapper {
            display: flex;
            flex-direction: column-reverse;
        }
    }
    

    and the target sections havent changed
    in the homepage (page-id-2)
    <div id=”av_section_3″ /

    and the Lobo Tech page (page-id-18) in 2 places
    <div id=”av_section_1″ /
    <div id=”av_section_3″ /

    thanks

    #1140622

    I duplicated the homepage (id2) and the flex code worked adding the element to css pageid706. Them making that page the homepage changed its ID back to id2.. and flex stops. Somehow its not ID properly?

    #1140626

    Update; i added background-color: red and that works. I see in inspector

    @media only screen and (max-width: 767px)
    #top.page-id-2 #av_section_3 .entry-content-wrapper {
        display: flex !important;
        flex-direction: column-reverse;
        background-color: red;

    Screenshot here, where the image (column 1) should be in the bottom and the text (column 2) in the top
    Image 2019-09-22 at 3.37.17 PM.png

    #1140642

    Setting the height in the column to “fixed” was changing the element to table and the code is for column. Changed the 1st column item to individual height and Flex column-reverse works again.
    BUT i need to align the text in the column vertically centered. Using the option to set the column to “Equal Height” lets me align the content in the center.
    How do i get the flex code to work for when the column is set to “Equal height”?

    OR use more code to center vertically?
    use justify-content: center;
    when media is larger than 767px?

    Something like:

    @media only screen and (min-width:768px){
         #top.page-id-2 #av_section_3 .entry-content-wrapper,
         #top.page-id-706 #av_section_3 .entry-content-wrapper {
            display: flex !important;
            flex-direction: column;
           justify-content: center;
        }
    }

    So it looks like this
    Image 2019-09-22 at 8.39.17 PM.png

    thanks!

    • This reply was modified 9 months, 2 weeks ago by  andyux.
    • This reply was modified 9 months, 2 weeks ago by  andyux. Reason: adding more context
    #1140802

    Hi,
    Thank you for the good details, I tried to follow along and I believe I understand, so looking only at your homepage #av_section_3 I see that the column-reverse is working correctly because you have disabled the Equal height so now the issue is at 768px the image in the first column is not vertically aligned.
    2019-09-22-201851
    I found this article that offers a way to center the column vertically with flex and I applied it to your situation:

    @media only screen and (min-width: 767px) { 
    #av_section_3 .entry-content-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #av_section_3 .entry-content-wrapper .flex_column.first {
    max-width: 50%;
    }
    }

    2019-09-22-202328
    Please give this a try and use !important; where needed and clear your cache.

    Best regards,
    Mike

    #1141214

    Fixed! thanks so much Mike!

    #1141283

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘flex-direction: column-reverse;’ is closed to new replies.