Mobile version of a post grid - by Marta Iraola

This topic has 6 replies, 2 voices, and was last updated 5 years, 8 months ago ago by Rose Tyler

  • Avatar: Marta Iraola
    Marta Iraola
    Participant
    April 15, 2019 at 11:46

    Hello,

    I was checking the mobile version of my website and I would like to know how to display a post grid in another way. I like how it is in the desktop version, but the mobile version is too big.

    I use post grid to show posts and portfolios.

    In the desktop version, I show 6 portfolio per row, but in the mobile version it shows just 1 portfolio below the next.

    Is it possible to show at least 3 portfolio per row in mobile too? And maybe show them in a carousel?

    The problem with the posts is similar. I don’t like how it is shown in mobile version, I would like it to show only the latest posts and not so big. Show multiple posts per row.

    Thank you for your help.

    Kind regards,

    Marta.

    Please, contact administrator
    for this information.
    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 15, 2019 at 12:02

    Hello,

    Post grid element is a default element of WPBakery Page Builder. All available options you can find in Settings of the element.
    Additional customization is outside the scope of the basic support, so submit customization request to WPKraken team if you need help with it.
    This custom CSS code can be used to achive such result – http://prntscr.com/nc5dz3

    .vc_grid.vc_row.vc_grid-gutter-30px .vc_grid-item {
        max-width: 33%;
        display: inline-block !important;
    }

    Regards

    Avatar: Marta Iraola
    Marta Iraola
    Participant
    April 15, 2019 at 12:34

    Understood Rose, thank you!!

    The CSS code worked like a charm for the portfolios but the posts still show the same way. Is there another CSS code for that?

    Kind regards,

    Marta.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 15, 2019 at 14:56

    Please try this CSS:

    @media only screen and (max-width: 480px){ 
        .owl-carousel .owl-item .vc_grid-item {
            display:  inline-block !important;
            width: 50%;
            height:  auto;
        }
    }

    Or you can display posts using [8THEME] Blog carousel element – http://prntscr.com/nc8ehj

    Regards

    Avatar: Marta Iraola
    Marta Iraola
    Participant
    April 15, 2019 at 15:18

    Rose,

    It worked like a charm!

    Thanks a lot for your help!

    Kind regards,

    Marta

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 15, 2019 at 15:27

    Hello,

    You’re welcome!

    Regards

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.