Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 24, 2016 at 11:04 pm #653197
    vnfan

    Dear enfold support team,
    i have one 3 columns layout on my home page. I want to display it into a 2 columns layout on mobile version. Each column shouldn’t be larger than 354px.
    Could you please tell me how can I do this?

    June 26, 2016 at 8:17 am #653495
    Rikard

    Hey vnfan,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 767px) {
.home .av_one_third {
width: 50% !important;
}
}

    Regards,
    Rikard

    June 26, 2016 at 2:06 pm #653551
    vnfan

    Hi Rikard,
    thanks for working on the weekend. I have used max-width: 354px, instead of 50%. The columns look better now.
    One more question for this: how can I set each column stand in the middle (instead of on the left) of the smart phone (witdh 667px for example)?

    June 27, 2016 at 6:44 am #653669
    Rikard

    Hi,

    Please try something like this to center the elements: 

    @media only screen and (max-width: 667px) {
.home .av_one_third {
display:table !important; 
margin:0 auto !important;
}
}

    Best regards,
    Rikard

    June 27, 2016 at 10:43 am #653732
    vnfan

    Hi Rikard,
    now the columns stay in the middle but there now space between them anymore (mobile version)

    June 30, 2016 at 4:54 am #655073
    Ismael

    Hi,

    Adjust the code to look like this:

    @media only screen and (max-width: 737px) {
.home .av_one_third {
    display: table !important;
    margin: 0 auto 20px auto!important;
}
}

    The “737” width value is not a standard screen size. You should “768” or “667” for iPhone screens.

    Best regards,
    Ismael

    June 30, 2016 at 11:42 am #655215
    vnfan

    Thanks Isamel

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