We’re migrating to our new support system at https://support.neuronthemes.com/ please create an account and submit all new support tickets there to ensure faster and more efficient assistance.

Okay
  Public Ticket #2420114
Posts Responsive
Closed

Comments

  • serif started the conversation
    May 28, 2020 at 9:14am

    Hello,

    Is there a way for the posts section to display 4 columns in the tablet and mobile version? At the moment, I've have it set to 4 columns however it only displays 2 columns for tablet and 1 column for mobile. 

    Thanks!

  •  675
    Neuron replied
    May 29, 2020 at 9:33am

    Hi Serif,

    Please check the following style

    // Tablet
    @media (max-width: 1024px) {
        .masonry .selector  {
            max-width: 33.333%;
            flex: 0 0 33.333%;
        }
    }
// Phone
    @media (max-width: 768px) {
        .masonry .selector  {
            max-width: 50%;
            flex: 0 0 50%;
        }
    }

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  •   serif replied privately
  •  675
    Neuron replied
    May 30, 2020 at 4:48pm

    Hi,

    It seems like you've found a great solution to that. https://prnt.sc/sqpqq2

    Do you still need the CSS?

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • serif replied
    June 1, 2020 at 2:17pm

    Hi,

    It would be great if you could still let me know the css so that I'll have more options :)

    Thanks!


  •  675
    Neuron replied
    June 3, 2020 at 8:30am

    Hi Serif,

    I am sorry for the late reply.

    Sure, here's the Custom CSS, this one is tested and will work without problem.

    @media (max-width: 1200px) {
        .l-woocommerce-wrapper .masonry .selector {
            flex: 0 0 33.33333% !important;
            max-width: 33.33333% !important;
        }
    }
@media (max-width: 768px) {
        .l-woocommerce-wrapper .masonry .selector {
            flex: 0 0 50% !important;
            max-width: 50% !important;
        }
    }

    33% means 3 columns 50% 2 columns and so on.

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.