Build Your Own Business Website header image

Responsive Design

Fine Tuning Responsiveness with CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to fine tune responsiveness with CSS to get the text to align center by reducing the padding and reduce the extra space. We show how to set the media query for smart phone devices portrait and landscape modes in Thesis 2.1 Skin Design and also talk about the tools

Troubleshooting Responsive CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we troubleshoot responsive CSS in a Galaxy S5 screen. We show how to remove the class in the Thesis Skin Editor that is hardcoding the size of the widget. Member: You helped me out tremendously on this before what you did is you gave me the CSS code, I put it in

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

How to Add the Viewport Meta Tag to a Thesis 2.1 Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we demonstrate how to add the viewport meta tag to a Thesis 2.1 skin by placing the code inside the skin.php. There are some devices that will try to scale the whole page to fit instead of making it change in size to fit the window so we demonstrate how to set

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

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

How to Create a Row of Images and Make it Responsive in WordPress

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

In this session we demonstrate how to create a row of images and make it responsive in WordPress using custom CSS. We wrap the images in a div tag to make them align left with the text and discuss the difference between inline block, display inline and display block base. For more information also see

Why doesn’t my Site Look Good on Mobile Devices?

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we discuss why a site doesn’t look good on mobile devices and the way to make that possible is by selecting a responsive skin. We also show where to find a couple of responsive themes for Thesis 1.8.5. Member: Well, I’m creating a website that’s in full width and it looks fine

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

Using the Carta Skin for Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Carta is a fully responsive skin for Thesis 2. This seminar introduces all of the features and functions built into Carta. It begins with an overview of the basic elements of the skin as well as its templates. Then I discuss all of the various Skin Design options and Skin Content options. Finally, we look at the Carta Smart Responsive Columns system and the Smart Widgets system. These videos are available to free members.

How Easy is it to Make a Thesis Classic Site Responsive?

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we discuss how easy it is to make a Thesis Classic site responsive using the responsive skin data for the single column and responsive columns that are both boxes and packages instead of creating custom columns for adding responsive elements. Also needed are the Thesis Responsive Meta Helper Box  and the BYOB

Configuring a Header with Menu to be Responsive in Thesis 2

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

In this session we show how to configure a header with a menu to be responsive in Thesis 2. We talk about what to do with the header image and discuss the different ways of displaying the menu by adjusting its sizes and using a background. Member: The header banner that you helped me with,

How to Disable the Responsiveness of Agility

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we demonstrate how to disable the responsiveness of Agility by taking media queries out and then show how a site will look like in different devices with the responsiveness removed. Member:   I just kind of wanted to follow on to the suggestion that you had made to me in Friday’s class. And

Are All 1 Column Layouts Smaller than 2 or 3 Column Layouts

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we talk about why 1 Column layouts aren't necessarily smaller than 2 or 3 Column layouts in Thesis Classic. We demonstrate how to adjust the width of the page when using the Page Framework for a 1 column layout and show how it displays in various devices using the responsinator. Member:  Are

Lesson 6 – Part 7 – Make the Front Page Template Responsive

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now we makes the rest of this responsive for the front page template. So let’s save our CSS and just look at it on a regular page for just a moment. Okay, it looks pretty good in a regular page. Let’s come over to the Responsinator and take a look at it. Now, the first

Introduction to the Responsive Versions of the Thesis Classic Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we introduce our responsive versions of the Thesis Classic skin and demonstrate how the modifications work. We show how to add sidebars, set up the skin and how to add the responsive meta tag to the skin using the BYOB the mea helper box. So I’ve created a couple of things here

Lesson 4 – Create the Typical Styles

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this lesson fourth lesson, Create the Typical Styles, of our Create a Responsive Skin for Thesis 2.0 course we dive right in and set up the general formatting for the header, content, typical sidebar and footer. This is followed by a review of our site background in the PSD files, after which we show

Lesson 3 – Part 7 – Smartphone Responsive CSS Rules

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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

Lesson 3 – Part 6 – Tablet Portrait Responsive CSS Rules

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We've got the tablet landscape version done for the moment and now, what we're going to do is the tablet portrait for our Thesis 3 responsive skin. We'll come back over here to our snippets.css file and we'll start creating here. Now, remember that in our tablet portrait version, we want somewhat different behavior. In