Issues with resizing

Hey Matt,

I think I know what the problem is on the page. I’m actually kinda glad that you wrote me, because I never thought that this would be an issue.

The theme you are using has some very (I would even say overcomplicated) CSS for galleries. If you look at your style.css file from lines 1252 to 1328. You will notice lots of max-widths and margin attributes.

The CSS currently looks like:

.gallery {
	margin-bottom: 20px;
	margin-left: -4px;
}

.gallery-item {
	float: left;
	margin: 0 4px 4px 0;
	overflow: hidden;
	position: relative;
}

.gallery-columns-1.gallery-size-medium,
.gallery-columns-1.gallery-size-thumbnail,
.gallery-columns-2.gallery-size-thumbnail,
.gallery-columns-3.gallery-size-thumbnail {
	display: table;
	margin: 0 auto 20px;
}

.gallery-columns-1 .gallery-item,
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item {
	text-align: center;
}

.gallery-columns-4 .gallery-item {
	max-width: 23%;
	max-width: -webkit-calc(25% - 4px);
	max-width:         calc(25% - 4px);
}

.gallery-columns-5 .gallery-item {
	max-width: 19%;
	max-width: -webkit-calc(20% - 4px);
	max-width:         calc(20% - 4px);
}

.gallery-columns-6 .gallery-item {
	max-width: 15%;
	max-width: -webkit-calc(16.7% - 4px);
	max-width:         calc(16.7% - 4px);
}

.gallery-columns-7 .gallery-item {
	max-width: 13%;
	max-width: -webkit-calc(14.28% - 4px);
	max-width:         calc(14.28% - 4px);
}

.gallery-columns-8 .gallery-item {
	max-width: 11%;
	max-width: -webkit-calc(12.5% - 4px);
	max-width:         calc(12.5% - 4px);
}

.gallery-columns-9 .gallery-item {
	max-width: 9%;
	max-width: -webkit-calc(11.1% - 4px);
	max-width:         calc(11.1% - 4px);
}

.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
	margin-right: 0;
}

I would start by removing margin and max-width attributes. It should look something like this:

.gallery {

}

.gallery-item {

}

.gallery-columns-1.gallery-size-medium,
.gallery-columns-1.gallery-size-thumbnail,
.gallery-columns-2.gallery-size-thumbnail,
.gallery-columns-3.gallery-size-thumbnail {

}

.gallery-columns-1 .gallery-item,
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item {

}

.gallery-columns-4 .gallery-item {

}

.gallery-columns-5 .gallery-item {

}

.gallery-columns-6 .gallery-item {

}

.gallery-columns-7 .gallery-item {

}

.gallery-columns-8 .gallery-item {

}

.gallery-columns-9 .gallery-item {

}

.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {

}

See if that helps. I think it’s a good place to start.

Thanks!

Hey there, thanks for the response. I saw those rules while working on the galleries, but assumed they were being generated by a plugin or misc. theme element. The theme is actually one I built as a child theme off of the twentythirteen stock theme, so. I’m really not sure where any of those rules came from. I’ll start removing them once I get back to my computer and let you know how it goes.

Thanks a bunch!

Alright, here’s the page after removing the styles: https://rfp.mattgrossdesign.com/landscapes/

It looks to me like the re-sizing is fixed, but now I’m more curious about the large gutters between the columns and the collapsing space when there’s no captions. Any ideas? Is there a good way for me to tweak those spaces?

Much appreciated, You’ve been a huge help thus far.

Matt

Hmmm…it looks like you might of commented out too much of the CSS. I think you need to comment out the CSS up until line 1335, basically end your comment right before .gallery-caption is defined. That should help with the captions.

Now the margin part is something you might want to tinker with once you have the comment issue sorted out. This code is currently commented out:

.gallery-item {
	float: left;
	margin: 0 4px 4px 0;
	overflow: hidden;
	position: relative;
}

When you are ready, you will probably want to uncomment that and change that to something like:

.gallery-item {
	float: left;
	margin: 4px;
	overflow: hidden;
	position: relative;
}

That will give each thumbnail equal spacing all around.

Starting to look good!

Cool. It looks like everything on the plugin side is going well, and with a little fiddling I can get the rest of the caption issues sorted. I’ve got a pretty good handle on everything else that needs to happen.

Thanks a bunch Phoenix, I really appreciate the help!

Matt

Hi Phoenix,

I’m having a similar problem to this, I’ve tried the options about but have not yet solved the issue.
Here is a link to how it’s looking right now… https://oscarmay.com/rebrand2/?portfolio=fashion , when I’m viewing it very wide all the images seem to overlap, then when I resize the window the images go to having quite a wide border between them,

Ideally i’d like a 1px border at all times (but have checked the jMig option not to allow changes of the columns so I could have the larger image size…) – I wondered if you could point me in the right direction of what I need to do or change?

If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else’s topic.

I am now closing this 7 month old resolved topic as it references an older version of WordPress.