I can't get rid of 12 extra pixels below an image and it's not vspace, margin, or a whitespace node
I have this very tricky grid which has to fill the screen without scroll bars and flow in a certain order every time without supporting a more friendly phone view. It works in this design to fulfill requirements, except for one thing, which is each image container ".gallery-thumb" is about 12 pixels too tall and I can't figure out why. I've tried the following things:
removing the whitespace nodes
collapsing the borders, margins, and padding
setting vspace to 0
changing the whitespace to nowrap
floating the elements left
setting the aspect ratio (breaks safari for some reason and also didnt work)
fixing any html validation errors in the w3 validator
setting the vertical-align to absmiddle
I don't see anything that should be causing it to overflow and I don't understand why it isn't vertically sizing correctly when the image is working fine. Please help if you can. 😫
19 Replies
URL is here: https://www.juriedartservices.com/demo-gallery-layout.php
Changed the body's font size to 16 pixels and now the space is 16px tall, so it's like something to do with a text node somehow but i cannot figure out what or why it's doing it
@jeffreytgilbert I’m looking at your site and I can’t quite see what you’re referring to, what exactly is out of place? Could you maybe send a screenshot of what’s wrong and what you’d like?
I think it's something to do with the clamp I had set on the height for the gallery-thumb
i changed the aspect-ratio to 1/1 and set height to auto and now the gap is very small
So your image doesn’t fill the whole container and leaves a gap at the bottom?
@jeffreytgilbert
it was a full font-height at the bottom when i had the clamp set the same for height and width on the element, but now that i set height to auto it seems closer to the expected behavior.
this is the trickiest CSS design i've ever had to do :\
But is it what I said?
The image isn’t filling the container properly?
But i think i can work with this. I'll just fudge it with a center vertical align on the element and pretend the tiny 1-2px gap left isn't there
when it was 16px it was cummulatively 48+ pixels lost on the page and these folks have some bad browsers
it was that snxxwyy
it numerically looks accurate now. there's only like 1-2 pixels of slop at the bottom for some reason now
the inspector finally shows it correctly
After the change
before the change
try adding this css on the image tag
@jeffreytgilbert
how did that work
because it definitely worked. i don't understand
are images like inline-block by default or something?
img tags are
display: inline; by defaultOh right. they are inline. and that caused a line break somehow because it was using the max width?
Here I explained it in depth in this post when someone asked the same sort of question https://discord.com/channels/436251713830125568/1144042659414016130/1144396806638284992
i can see how that could cause an issue. snxxwyy, you're super helpful and super smart and i've only been in this discord a few times but I definitely remember your screen name from before so thanks from then and again now for being super clutch and helpful
I'll give that a look.
No worries at all, glad I could help, let me know if you’ve got any more questions
You know, the chrome css podcast channel on youtube just did an overflow video and they didn't even mention this which i'm sure comes up all of the time in some way. Not like there's a shortage of image galleries on the web
Yeah it’s a pretty nifty fix for sure!
And some extra info that I didn’t explain, the
max-width: 100%; makes it so the image can’t break out of it’s container which fixes scrollbars that could occur.i had it set to a max-width of 700rem already due to the ability for it to go no larger than the resolution of the image
The only way I could figure out how to make the markup resize while being considerate of the available height was to use aspect-ratio to force the consideration of it, but that brings a whole other bag of hurt along with it since everything else doesn't want to play by those rules. The enlarging images in the grid to fill the available space problem seems easy, but these browsers just don't want to care about height as a first concern