Build Your Own Business Website header image

Mobile Devices

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

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

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

Lesson 3 – Part 4 – Forcing Device Width on Mobile Devices

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We could just start setting up our rules for our Thesis 2 responsive skin but unfortunately, if we did they still wouldn't work and that's because most devices are created so that they will scale a browser window or they will scale the site. If you go to my site on your iPhone, you’ll see

Lesson 3 – Part 1 – Introduction – Mobile Devices and Responsive Behavior

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to Lesson 3 of our How to Create a Responsive Skin for Thesis 2 class. Today, we are going to be creating the responsive CSS that will make the structures we created last week responsive to mobile devices. We are going to be spending some time talking about theory first

Lesson 4 – Part 7 – Smartphone Responsive CSS Rules

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The last piece of the puzzle is when you get down to less than 500 pixels and it actually doesn’t require very much from us. It doesn’t require any changes to the standard Thesis setup. The width is still going to be 100%, we’re still not going to have any padding and the content’s still

Lesson 4 – Part 5 – Forcing Device Width on Mobile Devices

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We’re going to take a sidetrack first and add a piece of information to our header so that we can force some of these things to behave the way we want them to behave. We’re essentially going to add a meta tag and that meta tag talks about scaling and device width. We are going

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 1 – Introduction – Mobile Devices and Responsive Behavior

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to Lesson 4 of our How to Create a Responsive Child Theme for Thesis class. Today we are going to create the responsive CSS and this is really the meat of the class. Everything else just builds off of what we’re going to do here today. We’re going to talk