Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 16, 2017 at 6:17 pm #734272
    alby54

    Hi, in a project I’m building I have several pages with a particular layout which I’m gonna try to describe. I made 2 sections, in each one I’ve inserted a 2/3rd column containing text and a 1/3rd with an image. My problem was that both images are related only to the first text and not the second one so that in the desktop layout everything is fine but as I shrink the browser window obviously the second image goes below the second text and not in between. So I came up with this solution. I’ve duplicated the second section and I’ve assigned the class ‘desktop’ to the upper one and the class ‘mobile’ to the one below. I’ve filtered them with media query and switched the order of the mobile one so that the 1/3rd column with the image sits on the left side and the 2/3rd column with text stays on the right. As you can see here alzacristalli everything is working as I wanted to when shrinking the window but the only drawback about it is that my client will have to insert double content in many pages in a 5 languages website. So I’m wondering if there’s a function that in a section with a given class can flip the columns so that what’s on the left gets on the right side just for mobile. This would definitely make the client’s data entry much easier. Do you think it’s possible? Thank you.

    January 18, 2017 at 11:32 am #735251
    Nikko

    Hey Alberto,

    I think it’s possible but you will probably need to add css class on some sections ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ). And add css codes (using flex). Can you create a sample page and post a link so we can test it and help you with the css.

    Best regards,
    Nikko

    January 18, 2017 at 2:51 pm #735333
    alby54

    OK, thanks Nikko, I made a copy of the alzacristalli page deleting the 2nd section and the relative class so you can do your tests.

    January 19, 2017 at 7:38 am #735711
    Nikko

    Hi,

    Thanks for creating the page, however you haven’t added a classname as instructed in the link I gave, but try using this code and add it to Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  .responsive #top .flex_column_table,
  .avia-section .entry-content-wrapper {
    display: flex !important;
    flex-direction: column-reverse;
  }
}

    When you have added a class to the section, just replace .avia-section to .your_class_name. The current code will affect everything so it reverses the columns in a section. Hope this helps.

    Regards,
    Nikko

    January 19, 2017 at 2:46 pm #735875
    alby54

    Thanks Nikko, works like a charm! I had forgotten about the flex instruction…. and that’s the way to go!
    Anyway, I’ve assigned a class (flex-container) to the section, but the correct code is without the part before the coma like this:

    @media only screen and (max-width: 767px)  {

.flex-container .entry-content-wrapper {
    display: flex !important;
    flex-direction: column-reverse;
  }
}

    Thank you again.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘swap columns on mobile’ is closed to new replies.