Mobile – Display Portfolio in 2 Columns

[Jackcoldrick]

Hey guys,

I’m trying to get this component: http://dante.swiftideas.com/portfolio-one-column-standard-style/portfolio-masonry-gallery/

to display in 2 columns on a mobile device.

I’ve tried doing the following:

.filterable-items .portfolio-item {
    width: 50%;
    float:left
}

but it doesn’t seem to work. It resizes them but doesn’t bring them up onto the same line so I have 2 on each. Any ideas? I’ve noticed all the li are positioned absolutely, is that anything to do with it and if so can you suggest a workaround?

Cheers,
J

[Rui Guerreiro – SUPPORT]

Hi,

Try the code below.

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

-Rui

[Jackcoldrick]

Hey Rui,

There is no need for the !important as it is picking up the change in width, the issue I am having is that I cannot get them to actually display on the same line, they still appear one below the other.

[Rui Guerreiro – SUPPORT]

Do you have a link? did you tried my code?

-Rui

[Jackcoldrick]

Hi Rui, I did indeed, I managed to get it working myself. I did it like this:

1. Apply a width of 50% to the .filterable-items .portfolio-item class. This resizes everything as expected.

.filterable-items .portfolio-item {
        width: 50%;
    }

2. The issue seemed to be with each li being positioned absoluted with a set top and left position. I overrided all of this by doing the following:

li.clearfix.portfolio-item.col-sm-4.masonry-item.masonry-gallery-item{
        position: inherit !important;
        float: left;
        display: inine-block !important;
        top: 0 !important;
        left: 0 !important;
    }

Those two definitions wrapped in the @media only screen and (max-width: 479px) within the responsive.css file did the trick. You can mark this issue as resolved.

Thanks,

Jack

[Rui Guerreiro – SUPPORT]

Great. Glad it’s sorted.
-Rui

[Jackcoldrick]

This is resolved, I tried marking it myself but it isn’t working. Thank you.

[Rui Guerreiro – SUPPORT]

Resolved.
-Rui