Freelancer — 460 | Site build | Homepage: responsiveness

This is the fun part. We get to take these main elements this layout we created and we get to tweak. This is where not only CSS grid but breakpoints themselves really shine because we're going to test and adapt our layout not only on desktop but on tablet mobile landscape and mobile portrait by the end of this lesson will have a fluid and responsive design that looks great on all kinds of devices. That won't just look good, it’ll better serve our clients clients. These are people who are going to Hayes Valley to look at great design work and those people are going to get a look at a site that works properly on all devices and view Hayes Valley as more trustworthy and as an authority when it comes to great interior design, that's our goal and it has been ever since we made our proposal and built out our content strategy. So let's start on desktop and a few things to note. Let's work top down but we can change things as we see them the nav bar on the top when we set our body all pages tag we go. Active Body all pages body all pages we can see we set padding to 15 on both sides that worked great for most of the content, but what it didn't work great for is the navbar the nav bar is set to fixed position and it's taking a hundred percent width. That's correct. It is being calculated correctly. But because it's a hundred percent width. It's getting pushed off the edge here. So let's make a fix for that will take the margin and we'll subtract instead of doing positive margin. Let's take the left margin and subtract 15. That looks pretty good. Now as we scroll down the fixed position on that nav bar stays it stays where it should be but it is no longer being clipped on the edge another quick fix we can do here not really a fix but a visual adjustment we can add some padding on the top and bottom to make some more breathing room here. 5 pixels in the top and bottom looks pretty good, and we can adjust the nav link color. Right. Now a darker color is a little heavy maybe something a little bit brighter. That looks pretty good. Let's drop the font size to 14 and increase some padding or just eyeballing this it's 18 right now. Let's eyeball it and 25 look spaced out pretty good. We're just increasing that hit area and making sure things are spaced out and look a lot less crowded this way. So that looks pretty good. The hero section itself. One thing to note here on the hero section grid. It's 100 VH. We knew it was 100 VH when we started this but what if we drop that a little bit maybe we should hold down shift and press the down arrow if we adjust and decrease that viewport height the content still shows up, but we can start to see a little more of the page now. This is a preference. So there's no right or wrong way to go about doing this but let's add with something like 70 VH. It looks pretty good and we can keep tweaking this and come back to it. But what we're doing here is surfacing more of the information on the page. So it's more easily. Accessible the other thing to note in this hero section. Is that the home hero content here looks great on desktop when we move down and go to tablet, mobile landscape, mobile portrait, things might look a little more crowded especially with this 2x2 grid, but that's our hero section. What about the collection list grid down here. What about the testimonials? Well, this section may be a little close for comfort to the footer itself. So we can grab collection list rapper then add some margin on the bottom. Let's say 30 pixels and while we're at it 200 pixels on the height here might be a little bit extreme. If we drop that we might still be able to achieve the same kind of visual result without as much crowding happening. Now the amount of white space between the top section the hero section and the testimonial section. It's 15 pixels. We know that because we want in here and set the grid gap to 15 pixels if we look at our parent grid we could see it's 15 pixels of columns 15 pixels in between each row and it's the same thing on the rest of it we go into our collection list grid here and go to edit.

Is 15 pixels 15 pixels and that's what we did on the sides too. But do we have to have that space between all elements? It's a good question. We could just try it out with our homepage hero section. What if we increase this to something like 60 a little bit more Breathing Room could do the same thing if we go back to it and add some more space underneath

60 here as well. Let's type that in 60. It's a little more breathing room if we preview that it looks okay, but for now let's undo a few times and get us back to the point. We were at before 15 of the top and 30 before you get to the footer. Okay, that looks pretty good. What about the footer itself? Well, this is pretty close to this content. The footer text is really close to that button. So if we add margin to the bottom that's going to adjust all of these but an alternative would be grabbing the button and adding a combo classic combo class takes everything from the button class, but it lets us build on those Styles. So if we create footer button, we now are inheriting we're taking all of that content from button the color and everything else. We're starting with that as a Baseline and we can build on it. So if we add some margin to the top it's only going to affect this button because it has the button class and the footer button combo class applied. So let's add 15 pixels, maybe 10 pixels from the top. It looks a little bit better more breathing room. Okay, that's desktop. If we go to preview you can see we have a little bit more breathing room. One of the things to note in the home hero section. The content goes on quite wide. It has a lot of width here so we can grab that paragraph which we can specifically named home hero paragraph and set a limit instead of width to 70%. It doesn't look too bad. Maybe we can get rid of that limit and do something else. What if the maximum width, the maximum possible width of this paragraph was set in pixels if it was something like 600 pixels and up that a little bit actually 600 looks pretty good. If we do that we can see it's not stretching even though the viewport is a lot wider and wider devices on larger screens. This might be a consideration. It doesn't go too far because the maximum is set at 600 pixels now so it'll take up the full width of the container. So if it goes down we drag this edge, we just grabbing the edge here and testing that fluid responsiveness. It's doing a hundred percent inside of this home hero content block, but it'll never be wider than 600 pixels so you can see when we get wider it hits that maximum and stops at 600 pixels. That looks pretty good. Let's check out the bottom and test that fluidity everything wraps and looks exactly as we'd expect it to look so that looks pretty good on desktop. That's desktop. What about, let's look at tablet view and on tablet view things scaled pretty well. The interesting thing about this home hero section is we can see not much if any of the bed itself. So if we go back to desktop it see that there's a bed here and depending on your view that bed is slightly obstructed, but here it's a much more dramatic loss because we're scaling up because this content is having to take up more vertical space on the tablet view. So we may want to do something a little different. Let's grab our image. Let's grab the main image here and instead of having to take up all four cells. Let's have it take up the top row only then we can take the home hero content and have it span both of those and instantly we have a different look instead of this content being covered the image itself being covered by this home hero content. We have a top-down view where we have one row that has the image add another row that has the home hero content. So that looks a lot better if we go back to top we can see that didn't affect anything on desktop. That's because changes Cascade down if we change something on desktop that will affect all the smaller views. But if we change something on tablet, it will still affect the smaller views, but it won't go back up and change something on desktop. So let's go back to tablet that looks pretty good something about tablet. We're starting to get more limited real estate. We might not want that navbar fixed at the top instead. We might want to put it back in the normal document flow and set it to static. When we do that. Remember that change we made we made that margin change. We subtracted 15 back on desktop view. Let's change that back to zero. So everything fits nicely in tablet view. So that looks pretty good that padding 30 pixel padding on the side might not be the best look for us if we're trying to keep things aligned to one edge Let's see if we remove that padding set this to 0 set this to 0.

See that looks a little better. It looks okay that home hero paragraph. Let's get rid of that max width instead. Let's just switch it to none. There's no limit there and it might be worth trying to center this content. So if we select home hero content right now, it's display is set to block we can use flexbox here. Flexbox, lets us stack content vertically horizontally. This is what happens by default horizontal we could switch that to Vertical that doesn't look too bad, but we can align everything to the center and for the button and add a little bit of space here. Doesn't look too bad. It's undo a few times and see if we could try something else turn off flex and what if we just take our home hero content this div block and hit center, align center using texts entering that looks pretty good. Spacing looks good. These images right here the aspect ratio might be a little off. Let's try testing fluidity here. Yeah, the images are a little tall. So instead of 165 pixels. Let's try 120. It looks a lot better. Okay. How about the footer let's scroll down and take a look at the footer. Everything seems to scale nicely on the footer if we test responsiveness. It looks okay. Everything's responding to the width. We're getting that fluid type of response. Okay, that's tablet before we move on. Let's check the navbar out. If we go to preview mode and test it out as is it doesn't work. And that's because we had switched it to static. What we should have done is switch it to relative with the navbar selected or switching it to relative remember over here the nav bar is fixed and we want it fixed. We want it sticking on the top like that as we scroll button tablet because we value that limited screen real estate. We're having it switched to relative now if we go to preview and we click the button we can see the drop down as is and there's some styling work to be done here. Let's go back out of preview and make some changes. Let's click that menu button, we’ll go over to element settings. And from there we can open our menu and when the menu is open we can control styling. So let's go back to the style. Pal we're looking at our selector here. This is the menu button class and the state is open. So let's make some changes first off that color switch it to Black the white color is okay. We might want to increase the size of that menu button a little bit. That's not a good look. Let's reset. It will keep it there for now. Then we have these nav links. Now these nav links have a color of transparent. They're not the ones that are giving us this great color to get that great color. Let's select the nav menu and that's where we're getting that gray. So a few options we could do here could do transparent but then we can't see anything but a white color here might look best and that looks fine. Let's go to preview. And when we press this, we see all of our content drop-down we could actually add transparency. So with our menu button selected go back to Nav bar settings open that menu select our nav menu and drop the opacity a little bit. This will give us a sense of context and will drop just a little bit that doesn't look so, so bad.

95% not too bad for now. We can revisit this a little bit later. We test fluidity we can see everything responds as we might expect it. If we go to preview mode and test this out we click it comes down click. It returns can also adjust things like easing here. So if we want to select the menu button again and change the duration over 800 milliseconds that will be half the speed. Could also put it back to 400 and choose something different. So when we open it, it could be he's out when we close. It could also be he's out. So we'll have a little bit more of an Abrupt feeling. Doesn't look so good. Maybe switch it back to he's so we'll go to he's he's tried out the default look, okay, we can revisit later but that's tablet things are looking pretty good on tablet what happens if we move to mobile landscape mobile landscape looks pretty good as is a lot of the changes we made on tablet work here too, but it's worth noting that we're looking at a view Port that's pretty tall here mobile landscape in reality is going to be a lot more scrunched. It's going to not have this much height. So how does it look when the heights decreased? Well, let's grab the bottom of our browser and resize let's see what happens if we have a much narrower or much shorter viewport. It doesn't look so great so we can go in here edit our home hero section. We're editing that grid and instead of 1fr let's put a real value pixels of maybe 200 pixels. So we'll show that view at 200 pixels. We're leaving the bottom content on auto but notice how its contents now getting clipped there.

Reason that's getting clipped is the following we go back to tablet we go back to desktop we can see this content is at 70 VH. So no matter what this is going to take up the grid home hero section is going to take up 70% of the viewport height that works when we have a lot of space here, but it doesn't work when things are more narrow. So what can we do to solve that we can get rid of that 70 VH and set that as a minimum a minimum height of 70 VH. That means it'll take up 70% of the viewport, but it'll still respect the content inside. It's a minimum. It doesn't mean it's going to crush content inside. So if on desktop we try it and we scroll up we can see it never collapses to less than the content inside and that applies to all views again these changes Cascade down. So if we go to tablet we’ll expect the same thing here, we might want to set a height here instead of 1fr we could do that same 200 pixels. That looks pretty good. And let's check mobile landscape that looks a lot better now because screen real estate is limited on mobile landscape. There are some other changes we might want to make but if we switch to our normal height, we might notice a little bit more space down here. That's because it's still setting that minimum of 70 VH on desktop that works fine tablet. That's where we start to see the space. So what we could do here is switch it to Auto setting our height based on the content inside. It'll still have 200 pixels for this row. It will still have the content inside of here which by the way, we can change the padding we can decrease that to maybe 15, let's get it just right. There's 15 on the top and bottom then on mobile landscape that looks better. The reason it looks better is because we made the change on tablet. So tablet passes down to mobile landscape and of course down to mobile portrait as well. The other thing to note here is that things are getting a little bit tight regarding these for previews these client projects. So instead of trying to scale these even more what we could do is with our collection list selected we can make a change to the grid. So let's edit the grid and instead of having four columns and one row what happens if we delete two of these columns automatically this auto-generated row shows up and content is push down accordingly. So now we have a 2 by 2 this 2x2 grid works fine. Now we might want to change the image height again again limited screen real estate. It might mean that something like 90 pixels is more practical so you can still see the image but it's not taking up as much height and while we're there this testimonial preview might be served better if the text size has been decreased a little bit more now. What about the other text? Maybe the heading we might want to do the same thing. Let's drop the size on the heading a little bit. It looks a little bit better. Let's drop the home here a paragraph a little bit. That looks better. And even the footer we're noticing. The footer text is a little bit large we’ll drop that and because they have the same classes applied to all of them the footer text. They're all adjusting at the same time. Let's check that menu bar. So if we go to preview and we press our button things look good, but they're a little wide and if we're on a mobile landscape device that we're looking at a mobile device in landscape mode. It might be a little tough to see everything on the screen. So let's go out of preview and then we'll select our menu button and open the menu in the element settings panel grab any of these nav links and style those they have padding 20 on the top and padding 20 the bottom. Let's decrease this to something a little more realistic like 10. It's a little bit closer the still a wide or at all hit area. So it's not going to be difficult as a tap Target, but there's a lot more that can fit on the screen. We can fit all five of these options in the drop-down on the, Okay, that's mobile landscape. Let's check that again. Looks pretty good. Let's check fluidity. That looks pretty good. Let's move on to the next one. This is mobile portrait. Now mobile Portrait by default right now. It looks pretty good. You can see that we're getting a little bit of knocking down on the Hayes Valley logo. So there are a few ways to deal with this the first thing to note. Is that body the body all pages tag that we put that 15 pixels of padding on we might want to make a change to that. So with our body all pages tag here, we can decrease that on mobile portrait to something maybe five pixels, maybe 10 pixels just holding down option or alt and dragging to adjust both sides at once. This is pretty narrow more realistically. We have something that looks like this that looks pretty good. But as it does get more narrow as we get on more narrow devices, it knocks the logo knocks the menu button down to the next line. So let's adjust the logo itself will select not the but the brand div block that selecting it and we'll set a width set it to 100 pixels. That might be a little small. We can eyeball it pulling down shift here to adjust by 10 at a time. That looks pretty good. We could also do a percentage but 140 looks pretty good and we can make micro adjustments here at a little more padding on the top to get things settled how we want them again. We're just eyeballing it right now. We can tweak a little more later. Now another thing these are vertically stacked. There's not enough room for both these buttons to be in the same spot. So what we might want to do is Select either of these buttons and switch. We're going to switch its display from inline block to block block elements will take up full width. So let's also add some margin at the bottom. Give it some breathing room that looks a lot better mobile portrait is really coming together. It might make sense to drop the font size on this heading even a little more. Let's drop it from 33 to maybe 24 that looks pretty good and a note about the height the line height has always been for or pixels we go back up to desktop. None of these changes that we're making on mobile portrait, of course affect desktop since changes Cascade down, but it might be worth changing our height to a unitless number again. We can do something like 1.2 and put the little - hit enter now, we have a unitless value. That means we don't have to worry about setting the height in pixels. We have to worry about setting the line height in pixels and that will work on all devices, especially when things wrap to the next line. That looks pretty good. What portrait looks good here.

Scroll down let's take a look at this. This might get a little tight on narrow devices. It might get a little tight around the edges so we can make an adjustment to that to the footer selected we can go in and instead of having two columns. Let's remove one of them. It'll knock things down to the next row. But remember it won't because these things are manually placed we placed these little content holders manually, but let's try switching the position to auto. Let's do it on all of these the other content right here. The little content holder right switch that to auto now our content is doing what we'd expect. It doesn't look perfect. That's because we have some other adjustments to make but it's doing at least what we'd expect it to do. So with our footer selected will have the content starting with Hayes Valley right now. It's set to move to the right side to a line to the right to the end. Let's center it that looks better this footer text. It's positioned correctly, but it's text alignment is to the right. Let's center it and that because it's the footer text on all of these is overriding everything else. That looks pretty good. Let's chat. Let's enter that we're looking pretty good here. But one thing to notice on all these buttons If you have noticed it already it's that there's a little extra space on the right and that's because our buttons when they're stacked or when they're placed side by side. It made sense on desktop. It made sense on tablet on mobile landscape to have these sit next to each other with some space in between some space in between each button. So we added some margin of 10, we can remove that here. Let's set it to zero and now everything's looking even even in matched on both sides. We test fluidity and responsiveness. This looks great might be a little bit of extra space here looking drop to maybe 30 pixels on the top and bottom but we're looking pretty good for now. So let's go to preview mode test this in desktop. It's a pretty good test this in tablet.

Also looks good test this in mobile landscape things are responding the reflowing as we'd expect them to of course on all of these are drop-down works. Okay, let's go to mobile portrait drop down looks good here to responsiveness and fluidity works. So we've made our tweaks and reviewed our design on desktop, tablet, mobile landscape, mobile portrait, and we'll come back to the homepage later once we've built out the rest of the site, but because we're styling using classes and because we've set properties on the body all pages tag, and of course because we started building out that CMS that'll make each subsequent part of this build that much quicker with that being said, the next step of this build is the portfolio of client projects for Hayes Valley.