Post Grid Responsiveness on Mobile

  • Resolved All Spiced Out

    (@allspicedout)


    2 months, 3 weeks ago

    Hi,
    I am using the free version of Blog Designer Pack and have built a website using Blog Grid with the following shortcode: [bdp_post design=”design-1″ grid=”4″ show_date=”false” show_author=”false” show_tags=”false” show_comments=”false” show_category=”false” show_content=”false” media_size=”medium” limit=”4″ category=”main_dish” pagination=”false”]. The grid looks great on the desktop version, but on the mobile version the grid becomes a one-wide, four-tall grid. Is there a way to change the responsiveness on the flex-wrap in “.bdp-post-grid-main” to allow a two-wide, two-tall layout on narrow screens? There is enough room on the mobile screen to allow for this layout. Thank you for the help and for providing a great plugin!

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

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

    (@pluginandplay)

    Hi @allspicedout

    Sorry for the late reply.

    Here is one method where you can manage this with custom CSS:

    @media only screen and (max-width: 640px) {.bdp-column, .bdp-columns{width:50% !important;}}

    Right now we have 100% to columns if screen size < 640. With this custom css you can set this to 50%

    You can add this CSS to WordPress Appearance > Customize > Custom CSS or in your theme / child theme style.css

    Please try the above CSS and let me know if there is anything.

    • This reply was modified 2 months, 3 weeks ago by pluginandplay.
    Thread Starter All Spiced Out

    (@allspicedout)

    Hi,
    This worked great! Thank you for the prompt reply and the help in providing the information.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.