Build Your Own Business Website header image

Responsive Columns

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

Thesis 2.1 for Web Design Professionals – Part 10 – Create 2 Equal Sized Responsive Columns in Thesis Classic Responsive

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now what we’re going to do is use the media queries to make that 2 column code we created in Thesis 2.1 responsive. Essentially that means we need to create a structure and employ it on the site so that we can see that it’s responsive. So we’re going to come back over here to

Thesis 2.1 for Web Design Professionals – Part 9 – Style the Desktop Menu While Retaining the Responsiveness

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now what I want to do is change this menu in the Thesis Classic Responsive skin. We need to change this menu in such a way that it doesn’t mess up the responsiveness. And the point of this whole exercise is to refresh your memory about making changes inside of the reverse media query. Essentially

Thesis 2.1 for Web Design Professionals – Part 8 – Change the Responsive Header Behavior for Tablet Devices

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next thing I’d like to do is to change up our 2 Column Responsive Header a little bit. I would rather have the tagline up here and a menu up here in these larger views. So rather than the setting that here in our custom css, rather than using W total here, we’re going

Thesis 2.1 for Web Design Professionals – Part 7 – Create a 2 Column Responsive Header in Thesis 2.1

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

So now that we have an understanding of the Thesis Classic Responsive media queries, it’s time for us to actually do something with that. And what we’re going to do is create some responsive columns in our 2.1 skin using those media queries and using the responsive code that is already included in These Classic