Several problems with gallery (Resolve Theme)

Hello Ru-
I took a few minutes to record a video for you to walk you through setting up a slideshow style gallery, I hope you have a couple minutes to check it out.

Hi Ru-

To get the “puzzle” look you saw in the example gallery, there’s two things to check.

In the gallery settings, make sure both the Gutter Width and Bottom Space settings of your gallery are set to 0 pixels.

The other piece is the image sizes. If you look at the demo gallery that comes with the theme, you’ll notice that all the images are the same width. They can be different heights, but they all need to be the same width to fit together without space in between.

For your second question, those decorations are a part of the Resolve theme’s design, but if you don’t like them, you can remove them with a little custom CSS. Navigate to Customize > Advanced > Custom JS &CSS and paste the following code into your Custom Theme CSS field:

.background-accent { display: none; }

Hi Ru-

From what I can tell, the main issue is that some of your images are much smaller than the others. You have 3 images that are 300×300, where others are up to 1400 pixels wide. If you have higher resolution versions of those small ones, that would be the best way to fix it.

The aspect ratio isn’t as important, as long as your smallest images are large enough to fill up the space.

I created this by scaling up those little images to 1046px wide:

Hi Dan,

The Primas theme used on your website has some default styles in the theme that are forcing your gallery images to one side instead of automatically centering them, and we can change this behavior along with the gallery background color by using some custom CSS.

The CSS rules below will modify the display of your gallery items and should give you the design you are looking for.

.wc-gallery .wcflexslider {
background: transparent;
}
.slides .gallery-icon img {
float: none;
}

Please let us know if you have any other questions for us!

Hi Dan-

Thanks a lot for bringing this to our attention, this looks like a bug in the Primas Theme. I’ve submitted a bug report to get this fixed for you, but in the meantime, add the following Custom CSS to your Customize > Advanced > Custom JS & CSS in the Custom Theme CSS field:

div.gallery-icon,
.gallery-icon img {
    float:none;
}