Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #638171

    I have created a page in Enfold layout builder looking like this

    TB=Text block

    This is just a part of the page, the area were we have the problem.

    TB1 = “STRATEGIER | ANALYSER
    KONKURRENTER & SÖKORD”

    First section:
    1/3 1/3 1/3
    TB1 TB2 TB3
    Second section:
    1/3 1/3 1/3
    TB4 TB5 TB6
    Third section:
    1/3 1/3 1/3
    TB7 TB8 TB9

    The first, second and third sections are connected to each others. The text blocks are in different 1/3 cells only to make them aligned. Basically an old school HTML table, created with Enfold Cells.

    Hard to explain in words, I provided a link to the page.

    So, everything looks great on a desktop/laptop. The problem starts when viewing the page on a mobile. Instead of displaying the page as on laptop with TB1, TB4 and TB7 under each other, it goes like this. TB1 -> TB2 -> TB3 then it jumps down to TB 4.

    This makes no sense trying to read the text, as TB1 are connected to TB4/7, TB2 are connected to TB5/8, TB3 connected to TB6/9.

    Moving all TB:s to the same 1/3 cells would make it look good on mobile, but not on desktop as it wouldn’t be perfectly aligned.

    Is there a way to change in what order the mobile displays the different 1/3 cells/TB:s? Or is there another way to create this page in Enfold and make it look the way we want it too?

    #638556

    Hi belinger,

    Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Regards,
    Rikard

    #640501

    Provided login details

    #640685

    Hi,

    To achieve what you are looking for you will have to create a different Color Section to display only on mobile. You can do this by adding ID’s to your Color Sections in the element options and then show/hide them with CSS:

    @media only screen and (min-width: 768px) {
    #desktop {
    display:block;
    }
    #mobile {
    display:none;
    }
    }
    
    @media only screen and (max-width: 767px) {
    #desktop {
    display:none;
    }
    #mobile {
    display:block;
    }
    }

    Thanks,
    Rikard

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