Making a photo grid
-
I am banging my head against the wall and hoping someone can help me.
I am trying to make a 5 column grid of photos.
I can’t get the photos to line up. I would really really like them to line up.
I think the problem is the HTML. As I do plan on learning more (which wouldn’t be hard!) about wordpress – should I be working on the code in the dashboard or should I be working with a separate application?
I looked at another grid of photos that I quite liked and they had row classes. I don’t have that – should I?
If someone could point me in the right direction – that would be excellent!
Many thanks
Kim
https://www.livecreatedecorate.com/diy/
CSS:
/* — Grid — */
.grid {
width: 745px;
margin: auto;
}.grid-m1 {
float: left;
width: 5px;
height: 1px;
}.grid-c1 {
float: left;
width: 131px;
}.grid-m2 {
float: left;
width: 20px;
height: 1px;
}.grid-c2 {
float: left;
width: 131px;
}.grid-m3 {
float: left;
width: 20px;
height: 1px;
}.grid-c3 {
float: left;
width: 131px;
}.grid-m4 {
float: left;
width: 20px;
height: 1px;
}.grid-c4 {
float: left;
width: 131px;
}.grid-m5 {
float: left;
width: 20px;
height: 1px;
}.grid-c5 {
float: left;
width: 131px;
}HTML:
<p><img class=”size-full wp-image-403 alignleft” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/08/for-the-home1.png” alt=”for-the-home” width=”752″ height=”60″ /></p>
<div class=”grid”>
<div class=”grid-m1″></div>
<div class=”grid-c1″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m2″></div>
<div class=”grid-c2″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m3″></div>
<div class=”grid-c3″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m4″></div>
<div class=”grid-c4″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m5″></div>
<div class=”grid-c5″ style=”text-align: left;”><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<p></p>
<div class=”grid-m1″></div>
<div class=”grid-c1″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m2″></div>
<div class=”grid-c2″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m3″></div>
<div class=”grid-c3″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m4″></div>
<div class=”grid-c4″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m5″></div>
<div class=”grid-c5″ style=”text-align: left;”><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<p></p>
<div class=”grid-m1″></div>
<div class=”grid-c1″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m2″></div>
<div class=”grid-c2″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m3″></div>
<div class=”grid-c3″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m4″></div>
<div class=”grid-c4″><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<div class=”grid-m5″></div>
<div class=”grid-c5″ style=”text-align: left;”><img class=”wp-image-342 alignnone” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/09/IMG_1938.jpg” alt=”SONY DSC” width=”120″ height=”80″ /></div>
<p></p>
</div>
<p style=”text-align: left;”><img class=”size-full wp-image-403 alignleft” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/08/for-the-home1.png” alt=”for-the-home” width=”752″ height=”60″ /></p>
<p style=”text-align: left;”><img class=”size-full wp-image-404 alignleft” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/08/for-the-kids.png” alt=”for-the-kids” width=”752″ height=”60″ /></p>
<p style=”text-align: left;”><img class=”size-full wp-image-402 alignleft” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/08/for-parties.png” alt=”for-parties” width=”752″ height=”60″ /><img class=”size-full wp-image-401 alignleft” src=”https://www.livecreatedecorate.com/wp-content/uploads/2014/08/for-anytime.png” alt=”for-anytime” width=”752″ height=”60″ /></p>
- The topic ‘Making a photo grid’ is closed to new replies.