PSD to HTML 4.3) Responsive Portfolio Items

Previous: PSD to HTML 4.2) Our First Media Query

Next: PSD to HTML 4.4) Styling the Responsive Menu

PSD to HTML Complete Course

Transcription of PSD to HTML 4.3) Responsive Portfolio Items

hello and welcome back to the PSD to HTML responsive portfolio build in thislesson we’ve we’ve already we resizer browser we’ve already taking care ofsome of the issues for when we first get our browser under 900 pixels we’ve addedsome padding their the next area I want to tackle is our portfolio section downhere because once we get under 900 pixels it is doesn’t look good I don’tlike having this one extra portfolio item down here by itself so we’re goingto add some more to that particular media query we reach 899 pixels and lessand I want to edit this portfolio list at that size so we go ahead and changethis we’ve moved everything into a new folder here to the site 21 folder soit’s going to change that and if things should still look the same here andlet’s edit the rules for war that portfolio list whenever we get down tothat side so let’s jump into our file here and let’s skip a couple linesunderneath the feature list but still inside the curly brackets for that899 media query and let’s create a rule for the portfolio list which is theunordered list that contains those four columns with our portfolio pieces sofirst of all and one that list to take up 100% of the width of the browser soshe goin said with their two hundred percent not just under the symbol itselfso we’ll save that and refresh and we don’t really see any big difference yetbut we’ll get there so there’s a portfolio with and now for the listitems themselves I want them to only take up 20% of the total with I’m sorry25% there’s four of them so a hundred metaphors 25% so will point to the listitems inside portfolio hyphen list so portfolio this space Li and for thoselists items I want to set the wit to 25% or againone-fourth of the total it I’m also going to take away the padding saidpatting 2012 margins 20 right now it has some margins facing in between theislands were gonna bring them all together and center margin 20 and thenin tests that saying that refresh your browser and they were given out as weresize it we can see those items getting narrower didn’t look too bad but once weget to a certain point we’re gonna want to break them up even more but that’s agood start at least its not breaking as soon as we get below that that 900pixels the next thing I want to do is to change the size of the captions you’llnotice when we get to a smaller size are captions are doing some weird things atthis point right herecaption isn’t even reaching all the way to the edge of that column and when weget to a smaller size you’ll see that RI concert getting covered up so right noware captions are set to a specific with and pixels so once we get below that 900pixel mark I want to change that so that the caption is 100% of the width of theparent element so we’re gonna come back to our CSS here and those captions arecontained inside a span tags so we can point you . portfolio hi friend list andif we scroll up we can see the portfolio list section above the folder and here’sthe original rule for that portfolio list Li span so that’s what we’retargeting here that’s going to copy that rule come back down to the bottom and wecan piece that here and again those spans contain the captions and herewe’re gonna set the width for those captions to 100% so if we say thatyou’ll notice again at this size we have that gap here so it’s refreshing andthere we go now receded that expands excuse me the entire width of the columnand as we resize it down it still looks pretty good so again once we get to acertain point we’re going to have to break it up a little bit more before nowit’s already looking better now one problem you might encounter wheneveryou’re trying to create these media queries is sometimes you don’t reallyknow how wide your browser is at a certain point when things start to breakwell we can test that by turning on our web developer tools and you can findthat in chrome by going to the View menudown to developer and developer tools you click on that and it opens up awindow down here at the bottom and it’s the same window you see whenever youright click on an element to inspect it but when this opens up you’ll noticethat when you serve resides in your browserappear in the top right you can see the dimensions of your browser so you cansee as we get smaller that at about 640 pixels things start to break so maybe at640 pixels we want to create our next break point to enter code we might goahead and come to the end of this particular media queries skip a couplelines and create a new media query so we’ll say media and then insideparentheses will set max which choose 640 pixels now keep in mind that thisparticular media query won’t cancel everything inside this media query itwill only cancel these rules up here if there’s something inside this mediaquery that conflicts with those rules otherwise it’s gonna leave these alonethis portfolio list will still stay at a width of 100 pixels even when we getbelow 640 pixels unless we specifically change that inside this second mediaquery but since we’re dealing with our portfolio list right now let’s go aheadand finish that up inside this media queries other things we’re gonna doinside it as well but for now it’s focusing on this portfolio list whichcontains are for items so at this point it’s starting to get really cluttered solet’s just break these all up so that they’re all on their ownline right now they’re all floating to the left so to fix that we just set thefloat property back to none so we’ll go inside that media query we’re gonnapoint to dot portfolio hyphen list space Li were pointing to the list itemsinside that portfolio list and will said the food property equal to none and willset the width for each of those lists items to 100% so they each take up theentire width of the browser’s let’s save that and refresh and see how it looksand already looks pretty good so as we resize it once we get to that breakpoint things are no longer breaking things are starting to look pretty goodand it looks nice so we can do more here with a jump back into our CSS for thatfor those lists items and we can put a little spacing in between those listsitems there’s a little bit of space in between the first one in the second oneso we can do that just by adding some margin hyphen bottom and we’ll set thatyou may be 10 pixels and that refresh and know we have a little bit of spacingin between those items and that looks really nice and we can take that all theway down to small as the Browser lets us go and it still looks really sharp sonow that we’ve gotten that taking care of you can scroll back up to the top andstart to take care of our menus or menu starts to break at a certain point aswell so we’re gonna start in the next video fixing up our menu to work like wewanted to say thank you for watching and I’ll see you then