Adapting a responsive image grid in a jekyll theme - size matters - solved

Help
1

Hello everyone,
this is the css I believe that defines the size of the elements background images.

I don’t understand where to set the width to be 100% of the background image used. If I change the height to 600px the cover shows full length but not full width and it gets worse (narrower) when I resize the browser window. I need the height and width to adapt so that the image is always shown completely.
Also, in the .portfolio__project__preview { block above there is height: auto; and height: 300px; directly below it … is that correct?

thanks.

2

Yeah that looks like valid but unused syntax to set height twice.

Also you may be confused by mixing height and width together with background size.

See if you can make a test HTML page with an image on it (or grid). And set the image either on the src of img and set width and height. Or set the image on the background properties of a div.

Using cover is the right direction so you can get full height and full width but automatically zoom in to crop the image without distorting.

Background size as cover here. There are some pen links to play in.

https://www.w3schools.com/csSref/css3_pr_background-size.asp

Check out object-fit as cover.

https://www.w3schools.com/csS/css3_object-fit.asp

3

Also try make all your shared code in fence blocks and with CSS highlighting for ease of reading.

```css
h1 {}
```

Or link to a file or gist.

1 Like
4

Thank you for the links - I will read that and experiment until I understand it.
its a bit confusing since the theme sticks to one height and only squishes the width of the background images via the container - to 100% it seems but the 100% are defined by what? - the column sizes of the mediaquery breakpoints? …

5

The inspector in your browser could help you figure out what element has what style on it and you can toggle styles off until you find the one setting the width.

1 Like
6

but the 100% are defined by what?

I think this example might will help answer that.

When Michael says:

The inspector in your browser could help you figure out what element has what style on it and you can toggle styles off until you find the one setting the width.

I would agree completely this will be the most straightforward way to discovering which elements you want to modify, and with what CSS. Some documentation on how to use the inspector can be found here (firefox has their own docs as well, it’s basically the same).

It can be tedious, but I hope that helps point in the right direction.

1 Like
7

Great. So the answer is to use the web inspector (Safari in my case) to find which rule in the css defines the width of the element, read documentation about what 100% actually means in css, thank you for the link to the article, there is more here and here and then change the css so it works for what I want to do.
I think I am sorted - I will solve this and then post the solution here, too easy :slight_smile: thank you.

8

I think the grid system is setting the width of the columns (images, elements etc) in the rows. 1 column is 100 percent - 3 columns have 33.33333333 percent each (so 3 images, one in each column. Then 1 of these images would occupy 100% of the column it is in which would be 100% of 33.333333%) and 2 columns would be 50% of the viewport (each).

Here is the grid system documentation

and yes, I like the web inspector, great tool.

9

So the solution is to first change the empty div (styled inline with a background-image) to a div containing an img tag. Then change the .portfolio__project__preview > img class from:

    width: 100%
    height: auto;

    to:

    max-width: 100%;
    object-fit: cover;

this works and now shows the complete image at all times. Thanks everyone for helping.
Moving on to sort out the responsive images srcset business now.

1 Like