Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 30, 2017 at 1:08 am #831635
    Cyphr

    Hi,

    I have a page with a series of rows each having 2 columns. The text and picture alternate in the columns down the page like a checkerboard. Looks fine on a desktop, but on a mobile, the left column always takes priority by default. So I end up getting Picture, text, text, picture, picture, text, text..and so on. :-P

    I have the custom CSS field enabled. Is there any quick css code by which I can set priority for a column, so that the column with picture always comes first, then the text. :)

    Something like this: https://www.control4.com/solutions/smart-lighting
    (On a mobile layout, the picture takes priority, followed by text.)

    Would really appreciate your assistance in this matter. :)

    Thanks.

    July 30, 2017 at 6:15 am #831680
    John Torvik

    Hey Cyphr,

    I have checked your site and the order is: TEXT -> IMAGE – > TEXT -> IMAGE.

    Best regards,
    John Torvik

    July 30, 2017 at 7:33 am #831719
    Cyphr

    Hi John,

    I’m sorry but that is not my site. I gave the URL as a reference, because I want to achieve the same result ie. Text > Image > Text > image on a mobile screen.

    If you notice, the page mentioned above on the control4 site has images in alternating columns when viewed on a large screen. If I create the same layout in Enfold, the first column in each row takes priority. So I end up getting text > image > image > text. But the page on the control4 site seems to override the default order and stacks it as text > image > text > image.

    So I was wondering if giving the column with the image a class name and adding some css code to change the order might achieve the same result. Unfortunately, I have no clue what quick css code do I need to add to change the order of the columns. :(

    Thanks.

    • This reply was modified 7 years, 4 months ago by Cyphr.
    August 1, 2017 at 12:51 pm #832826
    Ismael

    Hi,

    You need to create a duplicate of the grid row element and change the order of the cells for mobile view. Use the Screen Options to control the display property of the elements.

    Best regards,
    Ismael

    August 2, 2017 at 12:16 pm #833385
    Cyphr

    Oh okay. That seems like a clever workaround. :)

    Thanks so much for your help. You guys are awesome!

    Please go ahead and close the thread. :)

    August 2, 2017 at 3:10 pm #833512
    Rikard

    Hi,

    Glad we could help and thanks for the feedback. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Column priority in responsive layouts’ is closed to new replies.