Tagged: , , , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 30, 2020 at 11:10 pm #1199207
    hotspot01

    I’m hoping someone can help. The behaviour of a column on the mobile view is to stack each one top of another, 1 column per row. My client doesn’t like how it looks and would like it to be 2 columns per row.

    Try 1)

    In the 1st section of icon on the home page I’ve tried using the method layed out in the documentation (https://kriesi.at/documentation/enfold/columns/#toggle-id-13) to try to collapse 4 columns into two.

    Try 2)

    In the 2nd section of icons I tried using the solution I found in another thread. https://kriesi.at/support/topic/column-width-50-on-mobile/

    Neither of these worked for me. Can someone please take a look and let me know what I may be doing wrong.

    April 2, 2020 at 9:11 pm #1200297
    hotspot01

    Does anybody have any ideas?

    April 6, 2020 at 3:27 pm #1201249
    Victoria

    Hi hotspot01,

    Credentials did not work for me. Could you please update the credentials?

    Best regards,
    Victoria

    April 8, 2020 at 11:12 pm #1202043
    hotspot01

    I just confirmed them. It should be good to go.

    April 10, 2020 at 9:16 pm #1202755
    Victoria

    Hi hotspot01,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .flex_column.avia-link-column.av_one_fourth,
    .responsive #top #wrap_all .flex_column.avia-link-column.av_one_fifth {
        width: 50%;
        clear: none;
        float: left;
        min-height: 240px;
    } 
}

    If you need to limit the code to this page only you’ll need to use the page id class. If only to this section, you’ll need to give the custom id or class to the section.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 14, 2023 at 11:07 am #1416231
    klick.design

    Good day,
    I have a problem that I unfortunately cannot solve.
    I would like to design a colour section in such a way that it is always 2-columned in the mobile view. So then not to give each individual column an id/css, but the entire superordinate element, here then the colour section.
    Is there certainly also a script for the additional CSS.
    Thank you very much.
    Matthias

    August 14, 2023 at 2:27 pm #1416253
    Yigit

    Hi Matthias,

    Please edit your Color Section element and give it a custom ID (“two-col” in the example below) in Advanced > Developer Settings > Custom ID Attribute field (https://i.imgur.com/3gWy9FW.png).

    Then add the following code to the bottom of the Quick CSS field in Enfold theme options > General Styling:

    
@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #two-col .flex_column {
   width: 47%;
} 
.responsive #top #wrap_all #two-col .flex_column:not(:nth-child(2n+1)) {
margin-left: 6%;
clear: none;
}
}

    Best regards,
    Yigit

    August 15, 2023 at 12:41 pm #1416337
    klick.design

    Thank you. Exactly what i want. It works!

    August 15, 2023 at 5:45 pm #1416357
    Mike

    Hi,
    Glad Yigit could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

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