Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 22, 2016 at 7:42 am #663711
    Freek

    Hi,

    I setup a page with a content element of 100% with 4 columns in it.
    Looks good on a desktop but not on a mobile, because all columns are transformed to 1 column, so the list is very long.
    Is it possible to have 2 columns on a mobile screen? See site URL in private section.

    THX Freek

    July 22, 2016 at 9:13 am #663725
    Vinay

    Hey Freek,

    Using the below code will make the content the heading “EEN HECHT TEAM DAT BREED INZETBAAR IS” a 2 col layout in mobile. It appears you are using 2 images a logo and “WHAT” in different col hence the list appears one below the other. 

    @media only screen and (max-width: 767px) {
.responsive #top.page-id-118 .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    width: 45%;
    float: left;
    display: inline-block!important;
}}

    A workaround would be to enable custom css class name support http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and hide the logo and image in mobile using the below code.

    /*Show only in mobile or desktop*/

@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}

    Best regards,
    Vinay

    July 25, 2016 at 9:56 am #664510
    Freek

    Almost perfect. Now the 2 images are to close to each other. Is it possible to get some padding between the columns?
    THX Freek

    July 27, 2016 at 3:26 am #665583
    Ismael

    Hi,

    Adjust the code or add a left margin:

    @media only screen and (max-width: 767px) {
.responsive #top.page-id-118 .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    width: 45%;
    float: middle;
    display: inline-block!important;
    margin-left: 3%;
}
}

    Best regards,
    Ismael

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