Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 22, 2019 at 8:47 am #1140596
    andyux

    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

    September 22, 2019 at 12:19 pm #1140622
    andyux

    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?

    September 22, 2019 at 1:37 pm #1140626
    andyux

    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

    September 22, 2019 at 4:07 pm #1140642
    andyux

    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 4 years, 7 months ago by andyux. Reason: adding more context
    September 23, 2019 at 2:26 am #1140802
    Mike

    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

    September 24, 2019 at 5:56 am #1141214
    andyux

    Fixed! thanks so much Mike!

    September 24, 2019 at 9:22 am #1141283
    Mike

    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

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘flex-direction: column-reverse;’ is closed to new replies.