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.

Part 8 – Adjusting Background Images for Mobile Devices

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing I want to do is show you in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is how to use media queries to change up these images for mobile devices.

Use Media Queries to Swap Out Images

This is really a big image and a mobile device can’t see all these edges and doesn’t need a really big image for this. So I’ve created different image sizes for different devices and what we’re going to do is implement those. We’re going to use the media queries that are resident in a child theme to swap the images out for different devices.

Locate Media Queries

Let’s come down here and again, inspect the element. Then come over to the style editor and here I am at thesis.css and I’ll scroll down to the bottom where it’s got its media queries. Let’s come up here a little higher. It’s got a media max-width of 450 and a media max-width: 617 and media max-width: 897. Now I’m just going to copy this much of the media query and come over to the Custom CSS.

Adding New Media Queries in Custom CSS

A media query should always go at the bottom of your Custom CSS file. There’s the end of the body and this is the end of the media query. The media query is wrapped in braces and then each rule is wrapped in its own braces.

So in this case, what we’ll do is we’ll take this background image and paste that there. What we’re going to do though is use a different background image for this media query. So we’ll browse to my tablet, My Documents, My Business Website, Images and I’ll choose background-phone and background-tablet. And while we’re here, we’ll add the phone background.

Let’s copy that for the tablet and then we’re going to do this again for the next size down which was 617 and this is going to be images, phone.

Now, note that in Thesis Classic and in Social Triggers, these media queries are different depending upon how wide you make your columns. So it’s not necessarily going to be 897 or 617, this is the based on how you make your columns. If you’re using my Agility skin or my Carta skin you don’t have to write your media queries this way anyway, you’ll just use the Skin Design Options for Media Queries.

Choosing the Right Media Query

But the point here is how to write them yourself and how to choose the right media query to use. So we’re using the largest media query for the tablet and we’re using the next media query down for the big smart phones and that’s why we’re using these things.

Review the Changes in Responsinator.com

We’re going to save our Custom CSS, come back over here and reload it. Then I’m going to go over to the responsinator so you can see this in action. So this is on the standard iPhone. In a landscape view you can’t see any mountain because there’s enough sky that the mountain doesn’t show with this image. Then we come down to our bigger phones, even in that landscape view you can’t see it but then get down to a tablet and it looks the way you expected it to look. In the regular tablet size you do see some hills against the blue sky.

We are definitely serving up different size images for the different devices and that was what I want to communicate there.

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