New course! Every coder should learn Generative AI!
Try a free lesson0
Display
Hey everyone, im trying to get these four images to show in a 2x2 configuration without using a table for this. <section class="container image-grid sm-col-6"> <div class="row1 sm-col-6"> <p>Weddings</p> <a href="leafring.jpeg"> <img src="Leafring"/></a> <div class="grad sm-col-6"> <p>Graduations</p> <a href="Grad.jpg"> <img src="Graduation" /> <div class="family sm-col-6"> <p>Family</p> <a href="family"> <img src="Family"> <div class="children sm-col-6"> <p>Children</p> <a href="Adalyn.jpg"> <img src="adalyn"> </div> </div> </div> </div> </section>
4 Answers
+ 3
It's look like you're using a bootstap-like css framework, don't you?
I suggest you to precise it in question and/or tags ;)
+ 1
I never had used bootstrap, but I would say that you bad mix rows and columns...
I think you must do something like:
<section class="container image-grid sm-col-6">
<div class="row1 row"> <!-- container row ( bootstrap class 'row' + custom class 'row1'? ) -->
<div class="row1 sm-col-6"> <!-- container cell ( column of row ) / custom class 'row1'? -->
<p>Weddings</p>
<a href="leafring.jpeg"><img src="Leafring"/></a> <!-- here img src seems to not be valid? -->
</div> <!-- close container cell here ( you had nested all your div ) -->
<div class="grad sm-col-6"> <!-- 2nd cell ( 1st row ) -->
<p>Graduations</p>
<a href="Grad.jpg"><img src="Graduation" /></a> <!-- don't forgot to close tags: here you don't have close the <a> -->
</div> <!-- closing 2nd cell of first row -->
</div> <!-- closing first row -->
<div class="family row"> <!-- same a previous row for all rows... -->
<div class="family sm-col-6"> <!-- and cells... -->
<p>Family</p>
<a href="family"><img src="Family"></a> <!-- and still closing tags forgotten -->
</div>
<div class="children sm-col-6">
<p>Children</p>
<a href="Adalyn.jpg"><img src="adalyn"></a> <!-- ... -->
</div>
</div>
</section>
+ 1
You still forgot some closing </div> ;)
<div class="container image-grid">
<div class="row">
<div class="col-sm-6">
<p>Weddings</p>
<a href="leafring.jpeg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlcjh2U28teWxQcEk"></a>
</div>
<div class="grad sm-col-6">
<p>Graduations</p>
<a href="Grad.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlM093eG56SlR3MEE"></a>
</div>
</div>
<div class="row">
<div class="family sm-col-6">
<p>Family</p>
<a href="kevfam.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlWlN3RmhxTzFxNUk"></a>
</div>
<div class="children sm-col-6">
<p>Children</p>
<a href="Adalyn.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlU2Q1MGtiUkg5WmM"></a>
</div>
</div>
</div>
Clean indentation is usefull for better writting/reading/debuging :P
0
yeah, turns out i was using the rows and col. wrong with bootstrap, I got it all straightend out. Thanks!
Here is what it turned into.
<div class="container image-grid">
<div class="row">
<div class="col-sm-6">
<p>Weddings</p>
<a href="leafring.jpeg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlcjh2U28teWxQcEk"></a>
<div class="grad sm-col-6">
<p>Graduations</p>
<a href="Grad.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlM093eG56SlR3MEE"></a></div></div>
<div class="row">
<div class="family sm-col-6">
<p>Family</p>
<a href="kevfam.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlWlN3RmhxTzFxNUk"></a>
<div class="children sm-col-6">
<p>Children</p>
<a href="Adalyn.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlU2Q1MGtiUkg5WmM"></a></div>