How to make it responsive on mobile?

  • Resolved Rick Cram

    (@plantobeyourbest)


    1 year, 9 months ago

    On mobile, the entries/listings are three across, needing to scroll horizontally. Is there a way to have it display one, full-width entry, and the user only needs to scroll vertically? Than you!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Steven

    (@shazahm1hotmailcom)

    Custom CSS has been applied to the template:

    @media only screen {
    #cn-list-body {
        display: grid;
        grid-gap: 1.5%;
        grid-template-columns: 357px 357px 357px
    }
}

    You’ll have to also apply custom CSS to it renders as a single column grid on mobile sized screens.

    I suggest changing the grid-template-columns property to use repeat(), autofit, and minmax(). Here’s a link to a tutorial:

    And, here’s an example:

    div#cn-list-body {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      grid-gap: 1rem;
}

    I hope this helps!

    Thread Starter Rick Cram

    (@plantobeyourbest)

    Thank you, Steven. You’re the best. It works very well. Make it a great day, Rick

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make it responsive on mobile?’ is closed to new replies.