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 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.
Video Transcript
Member: I do have a few more quick question hopefully they’re quick.
Rick: Okay.
Member: If you look at passitonnetwork.org.
Rick: Like that?
Member: I just have a question about my header. So I have a newsletter opt-in box up there.
Rick: Yeah.
Member: Now on the tablet when that’s viewed it floats left. Is there a media query that I can use so that it doesn’t always shove up against the logo on the tablet when it’s in the landscape mode?
Rick: Ah, is this Carta?
Member: Yes, that’s Carta.
Rick: Yeah. So, it’s the media query for; it’s the Carta tablet landscape or tablet whatever media query.
Member: Oh, it’s already written in there?
Rick: No, just like I’ve demonstrated in skin design. Both Carta and Agility have the same custom media queries. So, they have Tablet Devices Landscape, Tablet Devices Portrait, Smart Phone Devices Landscape and Smart Phone Devices Portrait. So you would use the Tablet Devices Portrait one to make it behave the way you want it to behave in this case. And the only other thing to say about that is that in order for this to take precedence you have to if you’re in Agility you have to add the body class .agility to the rule or if you are in Carta you have to add .carta.
Member: Okay, and to get that to float right…
Rick: Identify the selector that you want to float right.
Member: And say float right.
Rick: And say float right.
Member: Okay.
Rick: Recognizing that, that rule will apply all the way down then. So you may need to go back in the rule after so if you’re doing that in the Tablet Devices Portrait you may want to go Smart Devices Landscape and change it back.
Member: Alright.
Rick: So, I’m not saying that you do. I’m just saying that the way this things cascade you know the rules here apply all the way through; unless overwritten.
Member: Okay.
Rick: So…