Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 25, 2016 at 5:48 pm #638171
    belinger

    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?

    May 26, 2016 at 7:46 am #638556
    Rikard

    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

    May 30, 2016 at 5:21 pm #640501
    belinger

    Provided login details

    May 31, 2016 at 5:58 am #640685
    Rikard

    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

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