Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 26, 2016 at 10:25 am #589635
    Jaap de Wit

    Hi,

    I have a page with 4 columns, This is going just fine on larger screens and iPad landscape mode. But when in portrait mode on an iPad the 4 columns are still on one row which doesn’t look very nice. How can I change the breakpoint to have the 4 column row break into 2 x 2 column row on smaller screens? On an iPad in portrait mode for example.

    Cheers,
    Jaap

    February 26, 2016 at 11:02 am #589647
    Guenni007

    have a look to your column – do you have choosen equal height?
    this ends in a display : table-cell and makes it not possible to break in your manner.
    Try to give the column a “individual height”
    than i believe that it is the default behavior to go to 2/2 rows.

    If not it is possible to set some media querries

    February 29, 2016 at 12:49 pm #590690
    Vinay

    Hi!


    @Guenni007     Thanks you for your help!

    If this is how you like the 4 cols to look in mobile

    Please add the below CSS in Enfold > General Styles > Quick CSS

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .flex_column {
    width: 47%!important;
    float:left; 
    margin-right: 3%!important;
}
}

    Regards,
    Vinay Kashyap

    February 29, 2016 at 2:54 pm #590777
    Jaap de Wit

    Hi,

    I solved it by setting individual height. Thanks @Guenni007 !

    Cheers,
    Jaap

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Change 4 column breakpoint smaller screens’ is closed to new replies.