Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #1199207

    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 ( 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.

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


    Does anybody have any ideas?


    Hi hotspot01,

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

    Best regards,


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


    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,


    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.


    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 (

    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,


    Thank you. Exactly what i want. It works!


    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,

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