Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 21, 2017 at 6:55 pm #879879
    hankisaac

    I have a page layout with 5 columns that contain images.
    When going to mobile, the layout switches from 5 columns to 1 column, which makes the columns/images way too large and a very long page.
    Can I use CSS to make it switch to 2 or 3 columns instead of 1?

    November 22, 2017 at 11:22 am #880172
    Nikko

    Hey hankisaac,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  .page-id-49 #management .av_one_fifth {
    width: 48% !important;
    clear: none !important;
  }

  .page-id-49 #management .av_one_fifth:nth-child(2n+1) {
    clear: both !important;
    margin-right: 4% !important;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    November 22, 2017 at 4:26 pm #880350
    hankisaac

    Thank you Nikko!
    Works great. Can you also show me an example of CSS if I wanted the mobile view to go to 3 columns (instead of 2)?
    Thank you!
    hank

    November 23, 2017 at 7:22 am #880608
    Nikko

    Hi,

    This is the css code for 3 columns:

    @media only screen and (max-width:767px) {
  .page-id-49 #management .av_one_fifth {
    width: 32% !important;
    clear: none !important;
  }

  .page-id-49 #management .av_one_fifth:nth-child(3), 
  .page-id-49 #management .av_one_fifth:nth-child(3n+3) {
    clear: both !important;
    margin-right: 2% !important;
  }

  .page-id-49 #management .av_one_fifth:nth-child(3n+1) {
    margin-right: 2% !important;
  }
}

    Best regards,
    Nikko

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