Portfolio masonry grid to show to items per row on mobile

[aerosum]

Hi,

I have a portfolio list which I have customised to show the list of custom posts.

On mobile view right now it shows one thumbnail per row. I want two thumbnails per row. On the landscape mode on phone it already shows two thumbnails per row. I guess there would be a simple fix for this.

Regards
Sumit

[Kyle – SUPPORT]

Hi

Please provide your link so I can check

– Kyle

[aerosum]

Hi,

Sorry for being late here. I missed checking the box to notify through email.

So the link is http://mybutler.co.in/o/1

Put postal code as 110003, then proceed to next page. There you see list of restaurants. This is done using portfolio view.

I want these restaurant logos to appear two per row on mobile. Let me know how I can achieve it.

Regards
Sumit

[Kyle – SUPPORT]

Not sure if this will work, try adding this to your custom css:

@media only screen and (max-width: 767px) { 
.filterable-items .portfolio-item {
  width: 50%!important;
}
}

– Kyle

[OctoKom]

@media only screen and (max-width: 767px) {
.portfolio-items .portfolio-item.item-animated {
    width: 50%;
    float: left;
}}

Used this on previous project 🙂

[Kyle – SUPPORT]

Thanks @OctoKom

– Kyle

[urbaba]

This reply has been marked as private.

[David Martin – Support]

I see this:

Can you provide a screenshot of what you see?

[urbaba]

This reply has been marked as private.

[David Martin – Support]

Please amend the code to:

@media only screen and (max-width: 767px) {
.portfolio-items .portfolio-item.item-animated {
    width: 50%;
    float: left;
    min-height: auto!important;
}
}

[urbaba]

It works! Thank you!

[Swift Ideas – Ed]

Great, glad we could help!

– Ed

[urbaba]

This reply has been marked as private.

[David Martin – Support]

Please also use this:

@media only screen and (max-width: 767px) {
ul.portfolio-items.filterable-items {
    height: auto!important;
}
}

[urbaba]

Excellent! Thank you David!