Video instructions and help with filling out and completing Where Form 5495 Brackets

Instructions and Help about Where Form 5495 Brackets

Welcome to part seven of the dharma yoga website series in this video we're going to add our media queries to give the website its responsiveness so on the left here is how the website appears right now and on the right that I'm going through is how it's gonna look by the end of this video okay so let's do away with the finished version I'm actually going to leave this one open so we can watch the changes as as we're adding the CSS so go ahead and just open up the CSS file that we've been working on and I'm going to add a note or a comment saying that the media queries are starting here so you can just write media queries or really write whatever you like here and then I'll just drop down and start the media query so you want to write at media screen and in parentheses max-width 740 pixels so everything 740 pixels and below we'll switch to these media query styles that we give it with the CSS so now you need to open and close swirly brackets and then the styles will open and close themselves within these brackets so let's get started from the top with our wrapper so we're just going to add a little bit of our take away a little bit of space at the very top so there's not a whole lot of space between the phone number and the top of the website so right div ID wrapper and then let's take away some margin from the top so right margin top negative 1% okay so if you look at it on the phone it's going to take a little bit of space away at the very top and now let's drop down to our image slider so the mobile version isn't going to have the previous and next buttons for the slider but when you use your finger to swipe the images on a cell phone or on an iPad they will move to the next slide so we don't really need the buttons so just write dot slider for the slider class and then B X wrapper for the BX slider and then B X controls open and close swirly brackets and then we'll just tell it to display none for the controls of the previous and next buttons here so display:none and if we refresh it will take away the controls so let's move down to the 1/3 class below and we'll just tell the class to float:left and we'll give it a width of 100% so if you remember in the full version it was something like 28% and let's give that a margin of 4% top bottom zero left right so this is going to take up so that's gonna be a big change for us styling these one-third sections at 100% so we have the icons sections up top and then the image sections and footer taken care of now so let's just make these icons a little smaller so let's give it a font size of three hundred and fifty-five percent which is maybe 3/5 of the original size so there we are and we forgot to take away this address or I forgot to so let's go and add the call-out section so you want to write div id call-out we'll give that a width of 100% so this contains the phone number and the address so we're gonna tell the address the paragraph call out text to display done first let's give it some margin of 3% top zero right 2% bottom and zero left okay so now you want to reference the call-out ID and then the paragraph text so right call out P and display:none to take away the address okay now let's move down to that heading one text here so we're just gonna make that a little smaller and take away some of the spacing so you just want to write h1 or rather we'll do the the turquoise text first so write font size 125 percent and now it's a little smaller to match the icons and let's take away some letter spacing so let's give it a letter spacing of two pixels okay now let's style this h2 with the welcome class so write h2 dot welcome and we'll just make that font size a little smaller so write one hundred and twenty percent and then refresh and now it's a little smaller and now we can drop down to the left column that contains the paragraph text and that end of the the h1 with the turquoise text so let's give that a width of 100% and now the image to the right will drop below it we still have our button off setting the width here okay so let's give this sidebar a width of 100% and refresh and now there's the image taking up 100% of the width so we'll just add some margin here too so we want to add a little bit of margin to the bottom of the left column so right zero top zero right 3% bottom and zero left so now that's gonna create some separation here and it'll take care of the edges with the zero margin so let's add that to the sidebar to with the image just want to write margin zero and then we can drop down and let's give the images a width of 100% of the screen or of the wrapper so refresh and now the images are flush with the border of the website okay so now let's give that image with the opacity in the sidebar class a little bit of a little less opacity or more rather so we'll move it from 0.7 to 0.9 and now it's gonna be a little brighter similar to the picture below okay so let's drop down to the paragraph text here so let's