Help me display 3 pictures on my mobile grid portfolio instead of one

Hi,

I've been trying to make my mobile site more similar to my desktop webpage, mainly by displaying 3 pictures (horizontally) in my portfolio grid instead of one. I have read all the previous posts about this and tried all sorts of different codes but nothing is working. Could someone please assist me?

https://www.jeminasmith.com/

Thanks

Hi there! Can you try adding this to your Custom CSS:

@media only screen and (max-width:768px) {
  .portfolio-grid-basic {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-column-gap: 16px !important;
  }
}

It's not perfect to have 3 columns on mobile, the images get very small and the text doesn't look as good, this should make it 2 columns, maybe a good compromise:

@media only screen and (max-width:768px) {
  .portfolio-grid-basic {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 16px !important;
  }
}

Let me know if that works for you.

That worked, thank you!

Yes, you are right, 3 pictures look a bit odd, I might do the 2 or make the spacing inbetween less and the letters smaller. But thank you for your help!

Would you happen to know how to make the instagram grid show on one line on mobile just like it does on the desktop? Right now it shows 2 pictures per row, which kind of blends in with my portfolio in a strange way.

On 1/6/2023 at 1:35 AM, jeminalinn said:

Would you happen to know how to make the instagram grid show on one line on mobile just like it does on the desktop? Right now it shows 2 pictures per row, which kind of blends in with my portfolio in a strange way.

It will be very small

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.instagram-block .slide {
    width: 14.2857% !important;
}
}