Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 14, 2018 at 3:09 pm #956481
    weasyweb2015

    hi everyone,

    i need to know if there is a way to reverse, on mobile, the column of a GRID ROW of enfold (not layout element one-half etc)

    i have a layout like this on desktop
    content – image
    image – content

    on mobile i have
    content
    image
    image
    content

    but i need
    content
    image
    content
    image

    best regards

    May 15, 2018 at 7:58 am #956835
    Rikard

    Hey weasyweb2015,

    I think the easiest way would be to copy your content and rearrange it for mobile. Then use the element options to show/hide the correct section for the corresponding screen size.

    Best regards,
    Rikard

    May 15, 2018 at 9:26 am #956864
    weasyweb2015

    ok thank you.

    but for a color section and layout element there is a way to reverse column on mobile. i found a css trick on enfold support.

    there is a way to do this also for grid row?

    May 16, 2018 at 6:22 am #957315
    Rikard

    Hi,

    I’m not sure to be honest, could you post the CSS that you want to use?

    Best regards,
    Rikard

    May 16, 2018 at 10:16 am #957425
    weasyweb2015

    this one for a color section with one-half layout
    @media screen and (max-width:768px){

    .test .flex_column_table.av-equal-height-column-flextable {
    display: flex !important;
    flex-direction: column-reverse;
    }

    }

    May 17, 2018 at 7:17 am #957958
    Rikard

    Hi,

    Thanks for that, though I don’t know which element your are trying to target exactly. Could you post a link to your site and point them out please?

    Best regards,
    Rikard

    May 21, 2018 at 11:20 am #959661
    weasyweb2015

    i want to reverse one of this section to set on mobile (max-width:768px) text – image, text – image

    example

    grid row

    May 22, 2018 at 5:34 am #960133
    Rikard

    Hi,

    Thanks for that, you can try this out in Quick CSS. I’m not sure if it will work or not though:

    @media only screen and (max-width: 767px) {
.flex_cell {
  display: flex !important;
  flex-direction: column-reverse;
}
}

    Best regards,
    Rikard

    May 22, 2018 at 2:54 pm #960382
    weasyweb2015

    i’m sorry but doesn’t work

    May 23, 2018 at 5:30 pm #961005
    Victoria

    Hi weasyweb2015,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  #av-layout-grid-1 {
    display: flex !important;
    flex-direction: row-reverse;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 25, 2018 at 1:11 pm #1001628
    weboptimus

    You can try this one.

    @media only screen and (max-width: 989px) {
    #test.av-layout-grid-container {
    display: flex !important;
    flex-direction: column-reverse;

    }
    }

    • This reply was modified 7 years, 2 months ago by weboptimus.
    August 25, 2018 at 1:52 pm #1001641
    Mike

    Hi,

    @weboptimus     thanks for sharing, I sure this will be helpful to many in the future, although this thread is a little old now.
    We will close it to reduce confusion.
    Hope you have a great day.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘push and pull enfold grid row’ is closed to new replies.