# Adapting a responsive image grid in a jekyll theme - size matters - solved **URL:** \ **Category:** Help\ **Created:** [February 14, 2021, 2:50pm UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641 "2021-02-14T14:50:30Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![roadie](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/roadie/32/2431_2.png) [@roadie](https://talk.jekyllrb.com/u/roadie)\ **Post date:** [February 14, 2021, 2:50pm UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641/1 "2021-02-14T14:50:30Z")
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. ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [February 14, 2021, 4:11pm UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641/2 "2021-02-14T16:11:45Z")
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](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](https://www.w3schools.com/csS/css3_object-fit.asp) ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [February 14, 2021, 4:12pm UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641/3 "2021-02-14T16:12:59Z")
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. ---
**Author:** ![roadie](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/roadie/32/2431_2.png) [@roadie](https://talk.jekyllrb.com/u/roadie)\ **Post date:** [February 14, 2021, 4:42pm UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641/4 "2021-02-14T16:42:18Z")
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? … ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [February 14, 2021, 5:09pm UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641/5 "2021-02-14T17:09:42Z")
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. ---
**Author:** ![dsbarnes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/dsbarnes/32/3252_2.png) [@dsbarnes](https://talk.jekyllrb.com/u/dsbarnes)\ **Post date:** [February 15, 2021, 3:45am UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641/6 "2021-02-15T03:45:51Z")
> but the 100% are defined by what? I think [this](https://wattenberger.com/blog/css-percents) 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](https://developers.google.com/web/tools/chrome-devtools/css) (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. ---
**Author:** ![roadie](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/roadie/32/2431_2.png) [@roadie](https://talk.jekyllrb.com/u/roadie)\ **Post date:** [February 15, 2021, 5:19am UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641/7 "2021-02-15T05:19:27Z")
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](https://www.impressivewebs.com/width-100-percent-css/) and [here](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) 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 🙂 thank you. ---
**Author:** ![roadie](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/roadie/32/2431_2.png) [@roadie](https://talk.jekyllrb.com/u/roadie)\ **Post date:** [February 15, 2021, 5:40am UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641/8 "2021-02-15T05:40:52Z")
> [@MichaelCurrin](#): > > 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 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](https://getbootstrap.com/docs/4.0/layout/grid/) documentation and yes, I like the web inspector, great tool. ---
**Author:** ![roadie](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/roadie/32/2431_2.png) [@roadie](https://talk.jekyllrb.com/u/roadie)\ **Post date:** [February 22, 2021, 3:54pm UTC](https://talk.jekyllrb.com/t/adapting-a-responsive-image-grid-in-a-jekyll-theme-size-matters-solved/5641/9 "2021-02-22T15:54:38Z")
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._