We are at the final step in creating a video landing page in Agility. It’s time to make sure the page is responsive. Let’s go over to the responsinator and you can see it actually is nice and responsive.
Review Site in Responsinator
You start off seeing the site on a phone. The image comes down to the right size and this content ends up stacking but we might want to play with that a little bit because that’s a little bit too narrow for this. In this case we’d want to use some custom CSS to make that content line up properly in that view. It works just fine in these other views.
It’s okay but it’s not great in the small phone. In the 415 width. I think most people really do have the larger phone but for people with a small phone we want to change this up a little bit. And I suppose we would want to do that same thing here.
Use Agility Media Queries to Make Changes
Let’s come back over to the Thesis home and then go to Agility Media Queries. We’re really looking at Smartphone, oh no it was tablet portrait which is where we had our odd problem. Let’s make our headings different sizes. This is an h1 and let’s take that down to 36 pixels. Actually it’s a page, it’s not really this…let’s take it down to 36 and take it down to 16.
I suppose I should have asked the question what is this header size. This is really the main problem. Oh, it’s 32 so we really want to take it down to 28 or something similar. Let’s see what happens now.
Okay, this really is the post box headline in that case. So in that case, we would really come back over here to Media Queries tablet devices portrait. Let’s take that down to 15 and take page titles down to 28 and let’s get rid of that. Let’s see how that works.
We need to save it here too. So that kind of helped. You’d really need to change that up to like 15 and 24 or something like that. We still have our Fix it NOW sitting there. It’s not the worst thing in the world but it is the consequence of the video shrinking in order to fit the space. Nevertheless the page is responsive.