Responsive images in Porfolio widget?

Shapely
1

Hi, I’m using the portfolio widget on the Shapely theme here: www.organicoshowroom.com

If you scroll down to the portfolio widget, you’ll see that the images do not align as they do on the demo. I assume this is due to a variance of image sizes. Is there a setting or snippet of code I can add to the theme that will make this widget have responsive images that line up correctly, without having to find images that work together or resize them all?

Thanks!

2

Hi @hdkamin,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

body.home .col-md-3.col-sm-6.masonry-item.project.masonry-brick img.attachment-full.size-full.wp-post-image {
    max-height: 182px;
}
body.home .col-md-3.col-sm-6.masonry-item.project.masonry-brick {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    max-height: 300px;
}

Best Regards,
Movin

3

Thanks, that definitely worked, but as you can see, the images are a bit squished. Do you know how to fix that, or does that require getting a better size image? Would you recommend a certain size to make them fit better? Thanks!

4

You are most welcome here :slight_smile:

To make them not to squish, you have to create all the images of size 330px X 230px so that they will display same as the images displayed on the site https://colorlib.com/shapely/