Mobile Portfolio Column

  • Resolved jimlaabsmusicstore

    (@jimlaabsmusicstore)


    5 years, 7 months ago

    Hi team, on our site schillerpianocompany.com, our items are displayed as a portfolio.
    We are wondering if there is any CSS or setting that can be changed so that when a portfolio page (such as https://schillerpianocompany.com/portfolio-type/professional-series/) is viewed on a mobile device in portrait mode that we may display items in two columns. I didn’t see any settings within the theme itself for this so I assume CSS is the route to take, but it’s possible I missed something as well.
    I searched to forum but didn’t see a similar post, if there is one I apologize for a similar post.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • hannah

    (@hannahritner)

    Hey,
    Try adding this to your custom css box in Theme Options > Advanced Settings:

    @media (max-width: 768px) {
#portfoliowrapper .tcol-md-4.tcol-sm-4.tcol-xs-6.tcol-ss-12 {
    width: 50%;
}
}

    Hope that helps!

    Hannah

    Thread Starter jimlaabsmusicstore

    (@jimlaabsmusicstore)

    Items were smaller on mobile, but still in one column.

    hannah

    (@hannahritner)

    Hmm, try changing to this:

    @media (max-width: 768px) {
#portfoliowrapper .tcol-md-4.tcol-sm-4.tcol-xs-6.tcol-ss-12 {
    width: 50%;
    float: left;
}
}

    Does that make a difference?

    Hannah

    Thread Starter jimlaabsmusicstore

    (@jimlaabsmusicstore)

    We now have two columns, but the image title is covering the image. This is the current CSS for the image title to appear without a hover affect

    .grid_item img:hover {
    opacity: 1;
    }
    .portfolio_item .portfoliolink {
    opacity: 1;
    }

    hannah

    (@hannahritner)

    Can you send a screenshot? https://imgbb.com/

    Hannah

    Thread Starter jimlaabsmusicstore

    (@jimlaabsmusicstore)

    Sure thing, here is what the site comes up with using the code you kindly gave this morning.

    https://ibb.co/xhCNfsx

    hannah

    (@hannahritner)

    So are you just wanting the image captions smaller?

    Hannah

    Thread Starter jimlaabsmusicstore

    (@jimlaabsmusicstore)

    That is correct. On a desktop it looks fine, but on the phone it overlaps and should be smaller.

    hannah

    (@hannahritner)

    Try adding this css:

    @media (max-width: 768px) {
.portfolio_item .piteminfo h5 {
    font-size: 14px;
    line-height: 18px;
}
}

    How does that work?

    Hannah

    Thread Starter jimlaabsmusicstore

    (@jimlaabsmusicstore)

    That works wonderfully! Thank you for all of your help, it is greatly appreciated.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Mobile Portfolio Column’ is closed to new replies.