Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 19, 2020 at 11:56 pm #1214457
    mgelz

    Hello,

    is it possible to change the order of the cells in a grid row when the page is viewed on mobile?
    I have a grid row with two cells. The first cell has text and is on the left. The second cell only shows a background image and I have added some white space so that the image is also visible on mobile.
    Then I have another grid row with two cells. Here I have the background image only on the first cell and the text on the left.
    That looks ok on a large screen, but when I am on mobile, in the responsive view, when I scroll down, I have both images after another. But I would like to achieve that I have always the cell with the test first and below the image. How can I achieve that without changing it for large screens?
    You can see my site at http://www.beziehungswege.ch

    Thank you in advance
    Regards,
    Michael

    May 21, 2020 at 4:22 am #1214867
    Nikko

    Hey Michael,

    Yes, it’s possible in the Grid Row, go to Advanced (tab) > Developer Options > Custom CSS Class put grid-reverse
    Apply these to all Grid Row and that you want to reverse the column order.
    Then in Enfold > General Styling > Quick CSS, add this CSS code:

    @media only screen and (max-width:767px) {
  #top .grid-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

    Let us know if this helps.

    Best regards,
    Nikko

    May 22, 2020 at 10:15 pm #1215328
    mgelz

    Hey Nikko,

    thank you a lot, it works like a charm.

    Best regards,
    Michael

    May 23, 2020 at 4:49 pm #1215533
    Victoria

    Hi mgelz,

    Glad we could help :)

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

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