At this stage, we’re looking good in terms of listing out the design projects in this portfolio.
But we always want to make sure it doesn’t just look good on Desktop, but also on Tablet, Mobile landscape and portrait, and larger breakpoints too. Let’s start on Desktop and test responsiveness and fluidity. If we grab the edge, kind of move it from the left and right, we’re looking pretty good up here. Let’s scroll down, take a look at how this is responding. Again, we have our container, so it’s keeping everything neatly organized, neatly bound towards the center with that margin. And again we hit thirty pixels there, and it starts resizing. That looks pretty good. Our grids nice and responsive. What about these? Also looking pretty good. Down to our contact form and our footer. So, Desktop looking solid.
Let’s move on to Tablet. Now, one thing to notice when we switch from Desktop to Tablet: this investment app, the UX design, this right here, looks visually centered for the most part, vertically centered. If we go to Tablet it doesn’t. That’s because in our section, if we remember way back to the beginning of this course, the padding on Tablet changes to thirty. So, for UX design, this kind of combo class here, let’s reduce that sixty to thirty. Keep things a little more even and matched. Maybe our project main image doesn’t need to be five hundred pixels, something like three hundred pixels ought to do. Let’s check fluidity, this looks pretty good. Project type. One thing to note here, on this limited real estate, it might not make sense to do a side by side. Actually catching right here if we look down at this image grid, this is thirty pixels on all sides, it's consistent. But notice how this is not. So let’s go back to Desktop. Let’s select our grid, let’s edit that, and let's make sure this is also thirty pixels. Now if we go on Tablet, that's even and matched, but we might want to use some of that real estate. Let’s switch over and make this one point five FR. That looks pretty good. Let’s look at our images. Those are nice and responsive. Other projects, those might be a little bit tall. Now notice how this isn’t taking up the full height. Let’s see why that's happening. If we click other projects, it is a grid, so to find out why let’s select our Div block. And we can see the Div block is a child of this link block, along with the project image. And the project image has an explicit height set. It doesn’t matter what that height is. Notice how social network is not taking up two lines, so it's not an equal height. To do that, let’s select the link block and we can already see its boundary is not taking up the full height either. So, we could set its height to one hundred percent, but notice how the Div block still isn’t taking up the available room. This is a perfect candidate for flex blox. So with our link block selected, again, with the Collection item, we’re affecting all other Collection items too, so this is also now a link block with the link block class. But, with our link block on any of these selected, let’s go in and choose flex box. That does not look good. Let’s make sure things are stacked vertically. And, all we have to do is select our child, the Div block, which is again a child of the link block, and choose our sizing option here. We want it to expand, we want it to grow if possible. Press that, problem solved. Now, the project image height, is that okay? We kind of just chose two thirty-five, that looks pretty good, maybe a little bit less. Let’s- two hundred. It’s responsive, equal height layout. That’s looking pretty good. Our contact form is looking good here too on Tablet, and of course, we’ve already configured our footer which doesn’t need the space anyway. That's great for Tablet.
Mobile landscape.Things are getting a bit tighter here. So, let’s do the same thing here. Our section, let’s select our section, that has fifteen, so with UX design selected let’s choose fifteen. Maybe that project main image is way too high. Let’s do one fifty. And that space underneath each of these project info blocks maybe a little higher. Let's do twenty or even thirty. Maybe a little spacing reduction underneath the client, five pixels. And it might be worth considering changing this parent. Let’s select our grid, and remove the second column. So now it's stacking, we have a top bottom design. And in that case, we might want to remove this margin even further. Let’s do fifteen pixels. So we can see the client, the project type, and then start reading about it. Now, somethings happening here that's causing this to overflow. And we’ll get to why in just a second. That’s down there. But ignoring that for now, lets test responsiveness here. This is getting a little tight on the images. Let’s choose again, this is one of those pesky image fives, let’s rename that. Let’s say project grid image, and set it’s height to maybe one fifty? We can even reduce this grid, let’s edit our grid, let’s reduce this to, let’s hold down Shift to adjust all sides at once, fifteen pixels. Press done. And now we have this problem right here. There’s a couple things going on, but a quick way to solve this we realize that a side by side is probably not going to work on mobile. Let’s edit our grid, and remove two of our columns. So now we have a stacked design. That’s going to solve the problem, which was caused by text overflowing, but let’s reduce some of these to not take up as much vertical height on Mobile landscape. Let’s do one hundred pixels, and maybe one hundred fifty pixels. And reduce this Div blocks padding to fifteen. Let’s actually rename that Other Projects Label. Lets test fluidity. That looks pretty good. Scroll down. We’ve already tested these on other pages, but let’s just make sure it works fine here. That looks pretty good. So, one thing we’re noticing up here this would actually affect all pages, if we go back home on Mobile landscape Megan Garcia Portfolio, that might not be spaced correctly. Let’s double-click and see why that’s happening. So the brand bar right here has ten pixels of padding on the left. On Mobile landscape, which is what we’re editing now, we might want it to align. Let’s check Tablet real quick. Yeah it's working fine there, but over here lets remove that padding on the left side. And because we changed it here, remember all instances of the Symbol look to the Symbol itself, which affects all pages. So back on project pages, that looks aligned. That looks much better.
Let’s check out Mobile portrait. Everythings looking responsive here. It’s getting a little bit tight with these images but not too bad. Let’s check it on an iPhone 12 Pro Max. Let’s check it on iPhone 12, and 12 Pro. It’s looking fairly consistent. Let’s reduce the height of these images a little bit more to preserve that real estate. One twenty. Maybe decrease the size of the smaller heading to eighteen. The project info to maybe twelve. Let’s change the height. That looks pretty good. Something we’re noticing here, on the link block, it’s kind of small. And there’s not much real estate. Not much space to tap on the link block when you’re on mobile. And if we go to Tablet, this might not be big enough. In fact, this is a great type of change we might want to go all the way back to Desktop and make. Add some padding on the top and bottom, that increases the tap target, the target size here, so when someones clicking it they have a much wider area, a much better chance of hitting the target when they attempt to click, or especially when they attempt to go down to mobile devices or touch devices, they have that tap area that tap target that's larger and more accessible. Also, let’s name it. Project Link. Back to Mobile portrait. It’s looking a lot better.
Now, before we wrap up let’s move on to our last breakpoint, the larger breakpoint. Nineteen twenty. So, what’s happening here is you see it’s nineteen twenty pixels, that’s the viewport width. What’s happening here, is it’s scaling down. We’re seeing nineteen twenty pixels, and to do that, we’ve scaled all the elements on the canvas down their original size. And, if we grab the edge here, and we continue dragging outwards, we can preview what this would look like on a much, much, much, much larger display. At any time, we can click in, of course, reset back to the original scaling, so that we can see the nineteen twenty breakpoint on this display. And things look pretty good here. Things look good on this display. Remember, earlier in the project we went over to the container and set it to sixteen hundred pixels, so our default container right here, on Desktop is twelve hundred pixel width. And when we go over here, it goes to sixteen hundred for a wider display. This might work fine. We can always make changes like on the project side by side, we can go in and decrease this, maybe give it a little more width over where. That could work. And, since these are scaled with a maximum height as well, they were at two eighty-seven before, we might want to hold down Option and make these a little bit taller since we have all of this extra real estate. Let’s do five hundred pixels. That looks pretty good. So, whenever we’re looking on any of these breakpoints, whether it's nineteen twenty, Desktop, Tablet, whenever we’re looking at these, it’s really helpful to hold down Shift, Option, or Shift and Alt, and use left and right arrows to preview what each of these looks like. And they look pretty good now on the larger breakpoint. But that's our larger breakpoint, nineteen twenty pixels.
But this is the last part of the project page. Now it responds well on Desktop, Tablet, Mobile landscape, Mobile portrait, and even NES. It also works really well on larger displays. Remember: you can clone this stage of the project to go in and see exactly how we built this, but for now, that's creating CMS-driven project pages in our portfolio.
[Grimur] I’m feeling much more responsive, uh, thanks to this lesson. Wow. Perhaps it’s because I’ve had three cappuccinos from Sextant Coffee Roasters. I’m, actually am coffee-nated. No, it’s not product placement, just excited and their coffee is just delicious. You know what else is delicious? These incredible things 31 day — whoa 23, 21 day portfolio. Share your stuff, we love sharing your stuff. Wow I might need to sit down, uh, and regroup.