Build Your Own Business Website header image

Fine Tuning Responsiveness with CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

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 to use to make it behave the way we want.

Video Transcript

Member: I looked up the site on the phone today, it didn’t really look very good up on the very top you know, because I got the search bar I did it simple you know essentially the logo or the name and the search on the right and that what sort of got weird you know when it came up on the phone so…

Rick: What’s the URL?

Member: ribblog.com

Rick: Now the search is pretty big, right for a phone.

Member: Well that’s my other question too and I’ve searched that too. Yeah, I’d like to customize the submit button form, you know design on that and actually it look worse on my phone but yeah, that’s one of my other questions is I’d like to you know definitely do some changes on the search button on the form. Change the size and…

Rick: Yeah. So what you could do is add text-align:center to this. We could add text-align:center to that.

Member: And you’re doing that just for the mobile?

Rick: Yeah so you’re doing it I don’t know if it really matters here or not so what we’re doing it in is the… so in your situation you would come to the Skin Design and in the Custom Media Query say in the smart phone devices portrait or landscape you could decide which one but to make that section text-align:center. So in this case, that is you know columns 2 half.

Member: You’re using the responsinator to get those.

Rick: Yeah. So you would say in this case .agility .columns_2.half and then get rid of all this stuff because all you’re doing is adding text-align:center to it and so once you hit the smartphone portrait it would align itself to the center.

Member: Yeah, so add new again, I haven’t gotten to that part yet but I’d still you know work on the content and the basic

Rick: Yeah, right. No, no I understand it’s just that there are tools for you to use

Member: Yeah

Rick: to play around with this to get it so that it behaves the way you want it to. I mean there’s going to be…

Member: The spacing there that you got it right there obviously there’s you know, too much spacing between the menu bar items and all that.

Rick: Yeah. Well, no not necessarily because remember that buttons need to be at least 44 pixels tall and wide in order to be used on a device.

Member: Oh, okay.

Rick: Right that…

Member: Even on mobiles…

Rick: Well, that’s because of mobiles, right I mean if you think about how big your fingers are you may not like the way that looks but that is well, how tall is that? That’s 46 pixels tall, that’s the right amount of size for being able to push one button without pushing the other.

Member: That’s right, okay.

Rick: So you’re not making this decision based on what it looks like.

Member: Yeah, exactly. That’s why I’m spending so much time on this.

Rick: Now, you could always switch this over to the main menu responsive menu and have it you know, go into a bar but that’s entirely up to you. I mean I think a simple menu like this I actually would prefer this myself but…

Member: Yeah.

Rick: Okay.

Member: That’s pretty clean, right? What do you think about the…

Rick: Yeah, you might reduce a little bit of padding here and there, get rid of the top padding in the mobile device so that you don’t have all that extra space.

Member: Exactly. It really doesn’t matter if it comes right up to the top.

Rick: Well it’s not going to come right up to the top, there’s going to be a little space there but Ken, I would probably put you know, some margin below the input element here so that you got input[type=”text”] at this point I would say margin-bottom:10px; or something like that you know just to give yourself a little bit of space and/or eliminate the search thing altogether in the…

Member: Yeah because on mobile they’re probably not going to searching the mobile, it’s less like there’s going to be…

Rick: Yeah so you know, that’s another alternative. You would do that by using my Display Content By Device Box and just wrap the search into that and then just don’t display it on a mobile device or something like that I mean those are the kinds of things you can do.

Member: Good yeah. Well, that’s great. Something another 2 weeks.

Rick: Well, it doesn’t have to be though, right? You can go ahead and go live with something like this just make sure you got your content on there.

Member: Well, no I am. I am going to get the desktop. I’m getting close, I still have to get certainly close.

0 Comments… add one

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

Leave a Comment