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 3 – Part 7 – Smartphone Responsive CSS Rules

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Create Smartphone Behavior

Our final behavior that we need to create is the Smartphone behavior for our Thesis 2 responsive skin. Actually, we’ve already done the heavy lifting on that, that is now, this all goes down to 100%. Now that I’ve got that, the next thing to do is to just make sure that everything else goes to 100%.

That’s really just this, .columns_4 .quarter, width:100% and actually, I don’t really need that although we’re going to use it and we’ll get rid of the min-width at that point so width:100%. I believe that is very close to being all that we need, it is.

Let’s go ahead and save that. Copy it, save the CSS, refresh it, scale it down and now we have it. Everything does exactly what we wanted it to do. Obviously, we have a lot of styling left to go but we’ve got the responsive behavior that we wanted.

Let’s take a look at this in the responsinator.com and put that in. Now you can see that in the iPhone, it essentially looks like we wanted it to look in both dimensions.

Adjust Widths For Specific Mobile Devices

A little wider Android and look at that iPhone 5. Actually, we’re going to have to take this 568 thing seriously. Instead of being 500, I think we’re going to need to pop that up to 568 or maybe just 600 because that’s not working for us there.

So max-device-width, let’s make it 600 pixels. Let’s change that over here, max-device-width of 600 pixels, save the CSS, refresh the responsinator. There we go, now we look better in the wider version.

This is the 380 x 685 and this is 685. You know, they’ve changed this a little bit since I looked at this last. In the new Samsung Galaxy obviously, it wants us to adjust for that so we probably do want to have an intermediate in here. Well, I don’t know, maybe that’s going to be okay. If we have a whole bunch of sidebar content, maybe this is fine.

We’ll have to take a look at that and see as we are working our way through this because it could very well be that we want to change up our media queries a little bit. Anyway, it looks like it’s working pretty well in our various formats.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment