Need help with portfolio image grid

HTML-CSS
1

Hello…I’ve been stuck for some time trying to get my images to line up in a column grid. I’ve tried many things by doing searches and making the suggested changes to my code, but nothing is working. Either nothing happens or the pictures expand past the page but they won’t make a grid with columns.
Help would be greatly appreciated…

2

Since you are using bootstrap.

<div class="row">
 <div class="col-md-6">
<img src=""></img>
</div>
 <div class="col-md-6">
<img src=""></img>
</div>
</div>

And so on.

3

Wow! This worked, thank you so much! I’ve had such a hard time trying to figure this out…now all I have to do is enlarge the pictures because at present they’re thumbnails. You rock @Pethaf!

4

image
image1366×768 130 KB

I cant seem to get where im going wrong.

5

You have to disable the element in your jQuery script at the top…it involves selecting the desired element as you did in line 4, a “.prop”, and a boolean to disable the desired element.

1 Like
6

How can I make my images larger and fit on the assigned page? Currently they’re too small and my changes either cause the images to overflow onto the next page or not do anything at all. Currently, the images are tiny thumbnails.

7

https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
Note in particular img-responsive.

1 Like
8

Hi @Pethaf,

Thanks for helping out again. I’ve tried this as well as a bunch of other things, but apparently, there’s something about my code that’s causing this and the other things I’ve tried not to work at all, or to work in a different way than expected. This suggestion didn’t change anything, the images were still very small,

9

Is this something like what you want?

10

I’m looking at a CSS Grid course and came across this technique:

container.a { display: grid; grid-template-columns: 100px auto 100px; grid-template-rows: 50px 50px; grid-gap: 3px; }

I should have 3 columns with 2 rows, I believe, but it only makes 1 column with all the images in that one column; this was one of the issues I encountered when I first started this thread. The images are a size that I can live with but it’s not making a grid as expected. The Bootstrap code made 2 columns but the images are too small and I can’t figure out how to resize them.