Images rendering too small

HTML & CSS
1

I am using a template (https://html5up.net/story) to setup a website for a dog show. It has mostly worked well, but I am having a mystifying problem with the gallery. I am using it to display the logos of the sponsor and I needed to make three different groups of sponsor so I am using the gallery css three times in a row. Gallery 2 and 3 work fine. Gallery 1 renders tiny images even though everything looks the same to me. What am I missing?

The website is https://adventsvalpen.se/ and I am talking about the images under “Tack till vĂ„ra huvudsponsorer!” as opposed to the ones under “Tack till vĂ„ra försĂ€ljare!”

I made a CodePen in which I tried to include what I think is the relevant CSS: https://codepen.io/Linda_A/pen/wvjOmOR

2

I’m gonna need a CSS guru to explain to me why the inner div is inheriting the flex display and then not using flex to manage the articles inside that display
 why the inner div isnt set to be a flexed size


I can “fix” the problem by setting flex: 1 on the “inner” div
 but
 i dunno if that’s the RIGHT solution because this thing’s got flexing at so many different levels my head spins.

2 Likes
3

I was having difficulty fathoming why the inner div was not full width.
There seems to be some kind of odd thing going on with width dependency.
The inner has shrunk to fit the (inherent) size of the two images, but then the size of the image containers are defined as 20% of the inner’s width.
So there is kind of a dependency loop here.

Setting flex-grow: 1 does fix it by allowing the inner to expand to full width, as does setting a width or flex-basis for the inner.
I guess the creator never considered a gallery with fewer than 5 images. I would agree it is a bit over-engineered with all the nested flexes.

2 Likes
4

Oh, never occurred to me that the issue was cropping up because of the number of images. Would it be best to adjust the CSS file or to add a style of flex-grow: 1 on the inner div for the affected gallery only?

5

The inner div is a nested display:flex and a flex ‘item’ is shrink to fit (even if it is also display:flex) so you get a smaller 20% than the others. You need to stretch the inner div to the full width of the parent and then it will be the same.

.gallery.style1 > .inner{
flex:1 0 0;
}

The others work because they have 5 elements pushing the div wider.

1 Like
6

Thank you. Not quite sure how to best implement it, though. I added it to the end of the CSS file but that doesn’t seem to do the trick.

7

You could have added it into the original css at line 6468 (IIRC).

Its not working at the moment because you have added this:

## Added ## .gallery.style1 > .inner {
flex:1 0 0;
}

There is no selector that matches that even if it was allowed.:slight_smile:
Use css comments if you want comments.


/* comments */
2 Likes
8

Well, that was unusually silly of me. Using commenting from a completely different code
 Thank you so much, flex is more than a little daunting.

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.