Freelancer — 495 | Site build | Portfolio page: client detail page responsiveness

So we built out most of our client projects. These are pages automatically generated by the CMS based on the content. We put inside when Rebecca or anyone from her team goes in if they add another client project it will automatically be added to their main portfolio page and a client project page will automatically be created this brings so much value to the Hayes Valley website. Think about what we had before a really limited sight a great main photo, but it was hard to communicate trust and authority and great design without featuring great design. This elevates their brand something really important to any brand, but especially to a fictional interior design firm. At the end of this video will have a fully responsive layout that works on all kinds of devices. So let's clean things up and get everything optimized on desktop tablet mobile landscape and mobile portrait desktop on desktop things. Look pretty good. We could test fluidity here and when we get more narrow when our viewport narrows a bit things, and to reflow. Pretty okay. Let's scroll down and take a look at these images. They are, of course, div blocks with additional client image that class applied. They're all 700 and they're covering things look pretty good on desktop before we move on. Let's of course add two elements will go to the ad panel symbols. Let's add our nav bar to the top right in the body. That looks pretty good. And of course at the bottom, let's add our footer. Go back to symbols grab the footer and put it at the bottom of the page if we scroll up our nav bar looks good. It's fixed. Its position is fixed if we scroll to the bottom we can see the footer so that's desktop. Let's move on to tablet.

On tablet things might be a little more narrow here. So the aspect ratio might be corrected by setting a different height 50 VH. Like we said before that's 50% of the viewport height. So if we're on a tablet device in portrait orientation, it will take up 50% of the top of that tablet device of that view port on the browser 50 VH might be a little much we could set a more explicit value here like 400 pixels or even a little bit lower maybe 350 pixels that looks better on tablet and as we test responsiveness, this still looks okay, but we might want to grab that client project content and instead of 70% Let's try 90% Give it a little more breathing room. Just pressing the Escape key will deselect anything that's currently selected. So let's grab the edge. That looks pretty good. We still have that 60 pixels of padding on all four sides. That looks okay, but these additional client images. That's a little much maybe 350 on those as well. That looks a lot better and when we get narrow everything reflows just fine.

Okay, that's tablet. Let's move on to mobile landscape. Now. Here's where things start to get a little bit more crowded especially in this more narrow view here. There are a couple things we can do here. One of them is just magical it's based on grid autoflow. So let's go and with our client project grid selected decrease our padding just like we did on the other page. We're going to decrease it to 30 pixels when in mobile landscape that helps a little bit but in more narrow views were still getting a lot of crowding. So how do we fix that? Pretty simple we're going to go to edit the grid and instead of using three columns. We're only going to need two might look a little weird when we do this, but that's okay. We're going to hit done and then instead of the major heading taking up three columns. Let's have it only take up to and same with this we have of course our client project content. Let's have that instead of taking up one take up two columns and one row, so we're just having two columns and one row that should push everything else down and it does, that's it. So if we go back to tablet and we take a look everything looks fine because we have this design that works fine. When we have the extra real estate on mobile landscape things collapse just as you'd expect that looks pretty good. Now the spacing here is a little odd we could go to edit our grid instead of 3.5 and auto let's try what auto would do to this. That looks okay. Getting about half and half here if we hit done that looks pretty clean. We could even narrow this a little bit. So instead of auto we could say this is one FR and this one over here is to FR. That would narrow it a little bit more and that might be a little preferable compared to the other. And also when we're stacking it like this. It might be a little tight actually the space up here that 30 pixels up here does look like that down here. Let's leave that for now. But the additional client images at 350 don't really match this at 250. Let's drop these two 250, enter. That looks pretty good. So mobile landscape. How's that looking when we collapse? It's looking pretty good. Let's do mobile portrait.

Okay, getting a little tighter here. Let's check how we did this back in the portfolio page. We had removed that padding all together. We'd remove the padding on the sides. So we might be able to pull off something like that in the client projects template. It could remove all that padding right here in that grid. Let's add some back to the top maybe 15 pixels. And to the bottom maybe 15 pixels there, too. Maybe we can make that both 30. Holding down option or alt on PC to affect both sides at once. This is looking a little bit better. There's some breathing room here, a couple things to note. We are still setting on this client project content block. We're still setting 90% has of tablet so we could go back here on mobile landscape and set that to one hundred percent that way that'll carry down that'll cascade down to mobile portrait looks pretty good. Okay. So the spacing here on this major heading this might affect a lot of the major headings looks a little intense with 20 pixels. So let's go into our grid see how this is sized. It’s automatically sized, is taking into account those 20 pixels. That might be okay, but on these headings since we're using the darker combo class, let's try 0 pixels. That looks a little bit better. I will cascade down to mobile portrait and we're getting a little more crowding. We're getting crowding down in this part of the grid so we could go in here and instead of doing one FR for the left column and two FR for the right column. You could just change this 122 FR or change this 121 fr2 little more half and half that looks a lot better. What about when it gets more narrow, that's fine. It's a little tight. It's a little bit tight but that's going to happen. Anyway, we do it it'll just wrap the text to the next line you could decrease the font size, but this is a really really narrow display. It's very likely someone would be looking at this website on 240 pixels and if they were still legible information is still clear. It's just a little bit crowded but this works for mobile portrait. We might want to take the client project hero set its height to 200. Let's go down. What did we have before? Let's reference in that portfolio page. What do we have before for this size? Well, that's actually 300 that works there. Let's go to our client projects page. Maybe 200 would be fine here. On these let's do the same thing 200 pixels. If we test responsiveness things look great, but that's it. For now. We optimize this design on desktop tablet mobile landscape mobile portrait. And that's the end of our work for the portfolio in terms of our user story. We pretty conclusively check the box next to showing great interior design work. We don't just show it on the homepage. We have an entire portfolio section for Hayes Valley Interior Design showcases that great interior design work all we have after this is one page about their process. We have their team section, which we’ll go fairly quickly and the contact page.