Build Your Own Business Website header image

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.

Lesson 7 – Part 11 – Make the Home Page Template Responsive

Difficulty Level -

Listed Under Lesson Subjects -

Now we’re going to make the home page template responsive. Let’s just start by checking it in the Responsinator. Notice how our images are being cut off? We need to add some code to make our images responsive and then we need to adjust this here so they drop down below this and we end up with some more padding there.

Making the Images Responsive

So that’s really the next thing to do. We’ll start off with our custom css. This is really a catchall. I’m surprised they don’t already have this in here, that is img and then max width: 100%. This means that the image can’t be any bigger than 100% of the space that contains it. And then in order to make it scale properly then you just say height of auto.

Now you would also do this with things like embeds and videos and the like if they don’t already automatically scale. This is just a way to make it scale the way you want it to scale.

So we’ve got img max with 100% height auto and then we need to think about the way half stuff is working. Well let’s see, let’s just save that css first and let’s come back to the Responsinator and refresh it and see what we end up with. Okay so now our images are doing the right thing.

Set Half Screen Widths and Alignments

And at this point, what we want is for these to be 50% of the width or 100% of the width. We want some padding here from one to the next so we’ll give it some bottom padding. And we want to make sure these just align to the center. So we’re going to come down here to columns… well actually, what does it look like as we get down here? What does it look like in 480? What does it look like in 600? 685? Yeah, it’s a little funky, isn’t it? 685, how does it look here? Yeah, it’s a little funky too and it’s fine there.

Let’s start off by saying that in our max width 800, columns 2 half, its width is 100%. We’re going to say padding bottom 20 px. And then the other thing I want to say is something similar to that, half .submit and what I want to say there is text align center.

That should change that up quite a bit. Well, not yet, give it a second. Well, I guess it’s not that bad but I was expecting… columns 2 half submit… half submit columns 2. Oh, I see. Isn’t that interesting? It is centered… yeah okay that’s fine. And then if we come down and look at a bigger version, there’s always some compromises in this, but that looks better. Okay, good.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment