PSD to HTML 4.2) Our First Media Query

Previous: PSD to HTML 4.1) Reviewing the Photoshop Files

Next: PSD to HTML 4.3) Responsive Portfolio Items

PSD to HTML Complete Course

Transcription of PSD to HTML 4.2) Our First Media Query

hello and welcome back to the PSD to HTML responsive portfolio build in thislesson we’re gonna get started by creating some media queries to help usmake our site more responsive in these media queries will determine or willallow us to change some CSS rules for CSS property values for some of ouritems once our browser reasons reaches a specific size so for example if we wereto jump into our browser here and let me go in and change this to the site 20folders of RD moved our files into the site 24 yrs all the changes we make inthis lesson will be saved there but we’re gonna take a look at what happensonce we get to a certain point now remember our content now is 900 pixelswide and once we get to that 900 pixel threshold watch what happens to ourcontent inside our containers all of our content including our menu appear theFacebook icon up here and all of the texts down here its own urged right upagainst the edge of that container so once we get down to that point once wereach let’s say 899 pixels I want to add a little bit of padding a little bit ofleft-right patterning inside that container class remember that containerclasses the class that sets the width 900 pixels or two max with them andundertake schools so let’s let’s start by creating a simple media query thatallows us to do that so we’ll jump into our CSS and we’re gonna come down to thevery bottom even underneath the clear fix stuff will skip a few wines and willcreate a new section our last section and will call it responsive to thiswe’ll have our responsive styles in itso the way this works is we’re going to create a media query using the at mediakeyword and then inside parentheses were going to set a maximum width in thisparticular instance so at a max width of 899 pixels we want a certain group ofCSS rules to take effect and that’s basically what we’re seeing here againwhen our browser is that a maximum width of 899 pixels in other words if it’s 899pixels or less than we want some things to change for example we want thecontainer class to now have a little bit of left and right padding in it so thatthe content isn’t right up against the edge of the browser so we’ll set apattern here to a value of 0 space 10 pixels and sometimes when I only haveone property inside a given rule upset that entire rule on one lines let’s gointo that there were nesting these rules inside the curly brackets for this atmedia query so again anything inside those curly brackets is only going totake effect if the browser is less than 900 pixels wide or if it’s 899 or fewerpixels wide so let’s see if that works let’s save our CSS file jump into ourbrowser and we’ve already got our browser less than 800 I’m sorry lessthan 900 pixels now so let’s just refresh it and now we can see a littlebit of padding in their little bit of space in between the text and the edgeof the browser window if we bring it back up to 900 pixels the padding forthat content area goes away and that’s kind of what we’re going for a loose wehave a little problem once we get to that break point and the padding kicksinyou’ll see that the gray background behind the edges of our featured sectionthat green background is gone and we can see the image behind that and that’s notwhat we want we want that great background there and so we can take alook at our CSS to try to figure out why that’s happening let’s go up to thatfirst feature section here and here’s our feature list and I don’t really seeanything here that would particularly because in that issue so we can makesome guesses and what I’m going to try to do here is set some left and rightmargins cause I think if we set some left and right margins that amounts tothe same width as the padding we added inside the container that that shouldtake care of it and let’s let’s see if that actually works let’s go into ourmedia query down here let’s get a couple lines after container but still insidethe curly brackets for the media query and 2.2 the feature my friend list classand let’s just give it a margin of 0 space 10 pixels so and leave the topbottom margin 80 battle set a left right margin of 10 pixels which is the same asthe left-right patterning we applied to the container so it seems that workssaying that refresh your browser and it sort of worked we can now see that graybackground but the border has now been moved in a little bit we can see some ofthe picture to the left of the border so I’m also going to try something elsehere and one thing we can do is just coming here right click inspect theelement and take a look at some of the different sections so if we have herover the unordered list we can see that that section where we can see the imagethere it’s got a padding their that green bar that we see is padding so thebackground we’re seeing there is a result of the padding within thatcontainer so for that feature list if we just take that packing away in my workso inside this feature list rule here let’s go in this down to the next lineand that’s that closing early break it downa bit and then after margin 0:10 will set our batting zero save it and refreshand there we go that takes care of the problemok so now we have a green background there instead of seeing dress eventimage and then gets off to a pretty good start so we saw a lot of work to do tomake this more responsive but again it gets to a pretty good start we’ve we’vegot a basic understanding of how these media media queries excuse me you’regoing to work and hopefully as we move forward will be able to understand howto get everything looking like we wanted to enter Photoshop file so thank you forwatching and I’ll see you in the next video