Display | Sololearn: Learn to code for FREE!

0

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>

1/27/2017 6:17:17 AM

Chad Christiansen

4 Answers

New Answer

+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>