Build Your Own Business Website header image

How to Create a Row of Images and Make it Responsive in WordPress

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we demonstrate how to create a row of images and make it responsive in WordPress using custom CSS. We wrap the images in a div tag to make them align left with the text and discuss the difference between inline block, display inline and display block base. For more information also see our seminar Introduction to HTML for WordPress and Thesis 2.1 Users talks about this extensively.

Video Transcript

Member: So I have images that I need to align normally I would just put that in a table.

Rick: Uhuh.

Member: But since it’s a responsive site I don’t know the best way to now do that.

Rick: And when you say align them what do you mean?

Member: Put them in a row.

Rick: Are they all same size?

Member: Yes.

Rick: Then, I would simply insert them using the media library and align them all left. So for example,

Member: And I have to put their names with them also.

Rick: What does that mean?

Member: Below the images I’ll put the person’s name.

Rick: Okay, so then in this case let’s see let’s just go to; let’s create another page. Add new page, let’s see “Side by side images” and I’m just going to add media, and let’s see that image is 150 x 200. So I’m just going to take each of these three images as examples. So, I’m going to insert it to the left. At the moment I’m not going to link it to anything. I’m going to give it a caption let’s see Joe Blow and I’m going to insert that into the page. And then come over here beside that and add media again. And again left alignment, full size, Sally Blow. And then one more, Jane Blow. So, let’s see then I was expecting these things well let’s just publish these things and see what happens. View page, okay so what didn’t happen was these things didn’t actually aligned to the left even though I said so. Because they must be, oh because the wp-caption is clearing the float. So, what we’re looking for then is we’re just going to create an new .wp-caption-text {} and say float: left;
           .wp-caption-text {
float: left;
}

Oh, this didn’t get the align left. I see, oh no it’s got wp-caption alignleft.

Member: I don’t know that makes a difference but I think the last on you did you put the name and title instead of caption.

Rick: Yeah, that doesn’t make a difference but you’re right. There’s something about the caption that is throwing this off because I guess that’s just these things are working. Okay, well I take it back. If I didn’t have captions it would have been easy. But because you need the text to float along with it at that point I think what we’re talking about doing is wrapping each one of this things in a div and floating the div and then you can put both the text and the image in the div right. So, if we go into the html view for a second here, div class equals image column,
<div>

And then we put a closing div </div>,
<div>
</div>

And then inside of that, we’ll go ahead and insert an image, add media. And again we’ll insert that now we’re going to align it to the center. And we’re not going to have a caption, I suppose we could have a caption but we’re not going to.
           <div>
<img src=”http://www.thesis2demo.com/wp-content/wp-content/uploads/2013/10/client-3.jpg” alt=”client-3″ width=”150″ height=”200″ />
</div>

 Below that we’re going to say <p> Joe Blow,
<div>
<img src=”http://www.thesis2demo.com/wp-content/wp-content/uploads/2013/10/client-3.jpg” alt=”client-3″ width=”150″ height=”200″ />
<p> Joe Blow</p>
</div>

And then, and actually you know more also not going to align this center. It should have been align: none;. In fact, let’s just delete that; let’s just do that one more time.
<div>
<p> Joe Blow</p>
</div>

Add the media, and align none, link to none, insert.
           <div>
<img src=”http://www.thesis2demo.com/wp-content/wp-content/uploads/2013/10/client-3.jpg” alt=”client-3″ width=”150″ height=”200″ />
<p> Joe Blow</p>
</div>

Okay, and then we’re just going to copy this and paste it three times,
<div>
<img src=”http://www.thesis2demo.com/wp-content/wp-content/uploads/2013/10/client-3.jpg” alt=”client-3″ width=”150″ height=”200″ />                                  <p> Joe Blow</p>
</div>
<div>
<img src=”http://www.thesis2demo.com/wp-content/wp-content/uploads/2013/10/client-3.jpg” alt=”client-3″ width=”150″ height=”200″ />
<p> Joe Blow</p>
</div>
<div>
<img src=”http://www.thesis2demo.com/wp-content/wp-content/uploads/2013/10/client-3.jpg” alt=”client-3″ width=”150″ height=”200″ />
<p> Joe Blow</p>
</div>

And then we are going to use a little custom css to make this stuff float and align. Because now it’s looking like that right and so the next thing that we would do then is come over to Thesis and come over to Custom CSS. And, let’s kill that for a second; and then we are going to say,

           .img-col

And we’ll say,
.img-col {
width: 33%;
float: left;
text-align: center;
}

We should set a minimum width,
.img-col {
width: 33%;
float: left;
text-align: center;
min-width: 150px;
}

And that might be all we need actually; save our custom css here and refresh this. Okay, the text align:center; did not work there but it can. Let’s see inspect element maybe it did work actually. Joe Blow that is centered, okay I guess we do want that to be align center; not align none. Actually it might be interesting I think first let’s just have no class first there for align. And let’s try that and then I think text-align:center; will probably do the job. This is getting a bunch of, no…

           <div>
<img src=”http://www.thesis2demo.com/wp-content/wp-content/uploads/2013/10/client-3.jpg” alt=”client-3″ width=”150″ height=”200″ />
<p> Joe Blow</p>
</div>
<div>
<img src=”http://www.thesis2demo.com/wp-content/wp-content/uploads/2013/10/client-3.jpg” alt=”client-3″ width=”150″ height=”200″ />
<p> Joe Blow</p>
</div>
<div>
<img src=”http://www.thesis2demo.com/wp-content/wp-content/uploads/2013/10/client-3.jpg” alt=”client-3″ width=”150″ height=”200″ />
<p> Joe Blow</p>
</div>

That did not yet, so where is it getting from that extra padding from or that extra margin. Image attribute is 150px and that’s fine. Image column, text-align center; oh, this should be inline right. So, that’s the other thing, actually probably inline block is fine.

           .img-col {|
width: 33%;
float: left;
text-align: center;
min-width: 150px;
}
.img-col img {display: inline-block;}

So you know now you can modify styles to get rid of the bottom margin here and stuff like that but then when this thing reduces down so obviously we want to add a little bit of isn’t that interesting. Oh yeah, because we lost our space there. So I guess the other that I would do would be to come over here and I would add some padding.

           .img-col {
width: 33%;
float: left;
text-align: center;
min-width: 150px;
padding: 20px;
}
.img-col img {display: inline-block;}

And then I would also make sure that we use the box sizing property. So,

           .img-col {
width: 33%;
float: left;
text-align: center;
min-width: 150px;
padding: 20px;
box-sizing: border-box;
}
.img-col img {display: inline-block;}

And unfortunately, we also have to do the -moz-box-sizing,

           .img-col {
width: 33%;
float: left;
text-align: center;
min-width: 150px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.img-col img {display: inline-block;}

Now the box-sizing property as you probably remember combines padding, margin and borders inside the width. So ordinarily the box-sizing; ordinarily what happens is added to padding and margin. And so the 33% plus 20px of padding would be 33% + 40px which is too big to fit in a space. So once we say box-sizing: border-box; at that point, 33% is the controlling dimension and everything is inside of it instead of added to it. So save that , we refresh this and then there we go. So now what happens is we get a little bit of space and you can see that it stays responsive when there’s not enough room for it to be you know a minimum width of 150px then the image shrinks a little bit but then once we get more room it pops back up again. And we get down to the phone size and it might actually be that what you want to do then is, in fact it is the case I think what I would do here is take this definition,

           .img-col {
width: 33%;
float: left;
text-align: center;
min-width: 150px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

 And then come over to Skin Design and then Custom Media Queries, and in Smart Phone Devices – Portrait I will type .agility,

           .agility .img-col {
width: 33%;
float: left;
text-align: center;
min-width: 150px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

And what I would do here is width of 100% and float: none;

           .agility .img-col {
width: 100%;
float: none;
text-align: center;
min-width: 150px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

And then all the rest of the stuff automatically stays the same,
.agility .img-col {
width: 100%;
float: none;
}

So, in the smart phone the width goes to 100% and it doesn’t float so it all just stack nicely. Save those design options, refresh this, take it down to our you know a vertical and now it stays full size and it stays in the center.

Member: Excellent.

Rick: Okay? so…

Member: Can I trouble you to use your CSS again?

Rick: Oh yes, I will  first will where am I? Custom Media Queries yeah, so here’s the…

Member: Oh, I got that I got that one.  Yeah.

Rick: Okay. Well, I’m still going to get this aside because I want to; I want to post it on the forum also. So, let’s see and that’s that media query and then we go to custom css and we’ve got that. I’ll post it in the chat window for you.

Member: Okay, I copied it in. So, thank you.

Rick: I’m sorry what do you want me to do again; I missed it. I thought you want me to give you this.

Member: No, I just wanted to see it again. That’s all.

Rick: Okay.

Member: So, I got that that. Thank you very much. What does inline-block mean?

Rick: Well, so display: block; means that something can take a dimension and the height and the width dimension. And it can be floated and it can be positioned using the position property. display: inline; means that none of those things can be the case. That it can’t take a dimension it can’t whatever and if it’s inline it doesn’t automatically create you know a curried return that kind of thing in the; so a span tag or a link tag are inline elements. They don’t automatically have dimension by themselves. They don’t automatically create a line break or a curried return like a header or a paragraph. And inline-block is the combination of the two. It can take the definition of height, and width and can be positioned and therefore can have text-align assigned to it. But it still doesn’t create a new line break so it can still sit inside of the text.

Member: Okay, thank you.

Rick: So, I can’t think of where I talked about: oh yeah, I actually the Introduction to HTML. Yeah, it’s the Introduction to HTML for WordPress and Thesis users where I talked quite a bit about display: block;, display: inline; and inline-block. So, you might want to take a look at that, that section of the video of the seminar.

Member: Okay.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
2 comments… add one
  • Maxine November 29, 2013, 3:22 pm

    Rick you are so clever. It’s very enlightening to watch the process you go through to resolve issues. Thank you!

Leave a Comment