Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 12, 2018 at 1:18 pm #911088
    fkmediaworks

    Hi,
    i’m wondering if there’s any way to modify the css of individual “#top .flex_column_table” elements on this page in order to achieve “column-reverse” on mobile screens? (Link in private content)
    Without adding individual color sections, as this would blow up the whole site now.
    Thanks!

    February 12, 2018 at 3:46 pm #911143
    Nikko

    Hey fkmediaworks,

    Unfortunately that’s not possible with css, what I can suggest is to use Screen Settings to hide in certain screen sizes. You will need to hide on mobile Locations and Quality, then duplicate them, the duplicate will be put under Service and hide in desktop. Hope this idea helps.

    Best regards,
    Nikko

    February 12, 2018 at 3:52 pm #911151
    fkmediaworks

    Uhm… excuse me… yes, that’s EXACTLY what “flex-direction: column-reverse” (and, related, “row-reverse”) is for. Or am I misunderstanding something?

    Either way, my question was how I could edit the CSS for the parent element of those two flex-columns, which is automatically generated when selecting “same height”…

    When applying the CSS value to the parent element using the developer console, I perfectly achieve the exact result that I need. Now how to do the same thing in Enfold/Avia?! ;)

    Thanks for suggesting building duplicates. I’ve already had that idea myself, but wanted to find out if there’s any way to make CSS settings for the parent element in the first place, before using a bad workaround…

    February 13, 2018 at 5:31 am #911522
    Nikko

    Hi,

    I apologize for that, can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  #top.page-id-15 .entry-content-wrapper .flex_column_table:nth-child(7), 
  #top.page-id-15 .entry-content-wrapper .flex_column_table:nth-child(13), 
  #top.page-id-15 .entry-content-wrapper .flex_column_table:nth-child(19) {
    display: flex;
    flex-direction: column-reverse;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    February 13, 2018 at 11:20 am #911618
    fkmediaworks

    Hi – thanks Nikko – works like a charm. Was able to adapt it for 2 other pages of the website similarly.

    February 13, 2018 at 1:20 pm #911678
    Nikko

    Hi,

    You’re welcome, just glad we could help :) Let us know if you need further assistance.

    Best regards,
    Nikko

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