Build Your Own Business Website header image

Media Queries

Change the Responsive Header Behavior for Tablet Devices

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We’ve created the 2 column responsive header in Thesis Classic but this may not come as a surprise to you, it’s doesn’t look that great responsively. Let’s take a look at it in the responsinator in the incognito window. You can see that this is tiny and this has shrunk over. It just doesn’t look

Create a 2 Column Responsive Header in Thesis 2.3

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So we’re going to start off by creating a 2 column responsive header in Thesis 2.3 using the Classic Responsive theme. We’re going to do this on the front page. And we’re going to continue this process of using the Thesis default stuff. We’re not going to replace these defaults we’re going to just add

Understanding the Thesis Classic Responsive Media Queries

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Let’s move on to looking at the Thesis Classic Responsive Media Queries in Thesis 2.3. We are going to take a crack at changing up the header and writing some new media queries rules. That starts really in just Skin CSS. Classic Responsive has 3 different media queries. It has the non media query version

Troubleshooting and Solving Responsiveness Issues in Thesis 2.1

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

In this session we troubleshoot and solve responsiveness issues in Thesis 2.1 for an image that has absolute height. We use custom CSS for the image container widget and remove the bottom margin to get rid of the height because it’s set automatically and is too tall for the space. We show how to specify

Troubleshooting Errors in Responsiveness in a Member’s Site

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we troubleshoot errors in responsiveness in a member’s site beginning with the images. We talk about why the images are not responsive and how Agility deliberately scales HTML images because they can't be bigger than their container. We change the image from a background image and make it a regular HTML image

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. This is really a big image and a mobile device can't see all these edges and doesn't need

How to Customize the Post Box in Thesis 2.1 – Part 8 – Adjust for Responsiveness

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The styling for this Post Box in Thesis 2 looks pretty good now. So, the next thing we want to do is check it in the responsinator and then fine tune it. It looks like that's definitely problematic, that one is problematic. So we want to set a min width. At what point did it

Using Carta Media Queries to Adjust the Header for Mobile Devices

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we demonstrate using Carta media queries to adjust the header for mobile devices to  make it behave the way we want it to behave. We add the body class .carta in order for it to take precedence and we discuss how to use floats in this context. Member: I do have a

How to Convert a Flash Site to WordPress & Thesis 2.1 – Part 14 – Use Media Queries to Improve the Responsiveness

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to - ,

To finish off this case study on How to Convert a Flash site to Thesis 2.1, we need to improve the responsiveness using media queries. We just changed the media queries to adjust for the logo in the header but we have some additional areas that need attention. For example, this menu still needs a

Part 8 – Adjusting Background Images for Mobile Devices

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

The final part of this Customizing Genesis Child Themes with Background Images and Colors lesson is on how to use media queries to change up the images that you're loading. And the reason you would want to do that here is that these images are way too big for a smaller device. This is just

How to Use Carta Media Queries to Make Background Images Responsive

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

In this session we show how to use Carta media queries to make the background images responsive and show the best way to layer text over a background image. We discuss spacing issues with background images. And we also demonstrate how to change the CSS in the media query itself for a background image and

Thesis 2.1 for Web Design Professionals – Part 6 – Understanding the Thesis Classic Responsive Media Queries

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Next in this seminar of using Thesis 2.1 for Web Design professionals we’re going to talk about the media queries in Thesis Classic Responsive. This is part of a larger discussion about media queries. And if you don't know what I’m talking about for media queries, I would recommend that you go take a look

Lesson 3 – Part 3 – Setup the Media Queries

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Let's just dive right into that and create some media queries for our Thesis 2 responsive skin. Now, ultimately, this code is going to go into our skin editor but for ease of error testing, error checking and to take advantage of all the code highlighting, syntax highlighting and benefits that exist inside of NetBeans,

Lesson 3 – Part 2 – Understanding the Media Queries

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

A media query has a very specific kind of syntax and that's a little bit different than the HTML syntax you just saw when we looked at that Thesis 2 page. The syntax in this case, is a little bit different and the very first part of the syntax is the media type and that

Lesson 3 – Create the Responsive CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this lesson third lesson, Create the Responsive CSS, of our Create a Responsive Skin for Thesis 2.0 course we begin by discussing the types of mobile devices we're designing for and the types of responsive behaviors we'll use in the skin. Then we move on to a discussion of media queries - what they

Lesson 4 – Part 3 – Set Up the Media Queries

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

On this site, this is the style CSS file for Lesson 4 and we’re going to set up our media queries. I’m just going to copy that comment, come down here at the bottom and say responsive design. Then I think I’m going to repeat that one more time so this is 1024 px to

Lesson 4 – Part 2 – Understanding Media Queries

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

A media query is a means of providing conditional CSS rules that are fired based on the device that is used to display an HTML page. You are probably familiar with a couple of different things, the print stylesheet and a projection stylesheet. You may have designed sites that were designed to look right in