10 - Adding our image grid


Questions & Comments

ron labbe - 7 months ago

Hello~ I have setup the grid, using my images instead of Dans... it works fine in the "Live" DW preview, but in a browser the grid doesn't "flow" properly. I've uploaded here http://studio3d.com/byol_test2/indexA.html HELP!? (thanks!)

Administrator Tayla Coman - 7 months ago

Hi Ron, This is likely a result of the 3rd item on the top row not breaking into two lines as the first 2 items do, therefore creating an inconstancy of heights for the second row. This may be able to be solved by wrapping each row in their own respective Div (Check out Bootstrap Rows) Alternatively you could (and should) wrap each bit of text beneath each image in a <p> tag, and then give those p tags a minimum height.

ron labbe - 7 months ago

THANKS! I will try this, and re-upload the (successful, hopefully) results!

ron labbe - 7 months ago

Working backwards to see where the problem came in. No text, and all looks like it should work with media queries, but it's not! Why? http://studio3d.com/byol_test3/

Administrator Tayla Coman - 7 months ago

Hi Ron, You haven't closed the .logo class in your style.css. You need to close that class with a }

Administrator Tayla Coman - 7 months ago

Sorry, your #logo ID.

ron labbe - 7 months ago

Thanks, Tanya... How did I miss that? DW even had a red number warning for me! OK, I fixed it, now I will try to get my images and text...

ron labbe - 7 months ago

Hi Tayla... Thanks again! We're getting so close! I made the changes and the pictures respond properly to media queries, but the h1 breaks oddly in Firefox (but not in Chrome) just a bit into the 768 media query... ? http://studio3d.com/byol_test2/indexA.html

ron labbe - 7 months ago

This is hard! Next, I tried to add the .png logo image (repsonsive bootstrap) and I thought everything was done correctly... BUT I lost my centering of the body (why??) http://studio3d.com/byol_test4/indexB.html

Administrator Tayla Coman - 7 months ago

Hi Ron, It seems that because you've linked the Bootstrap CSS after your own stylesheet that your styles are being overwritten. Please make sure the Bootstrap CSS link comes before your style.css link to be sure that nothing is being overwritten by Bootstrap.

ron labbe - 7 months ago

THANK YOU! I would have never thought of the order of the bootstrap stylesheet, but it makes perfect sense! What would I do without you!? :)

Administrator Daniel Scott - 4 months ago

Yeah - high five Tayla. You're awesome.

Jason Carapellotti - 4 months ago

Hi, at the 7:47 mark you add 1% padding "all the way around", "left, right, up and down", however the padding only seems to appear between the 1st and 2nd column and the 2nd-3rd column. I don't see padding on the left of the first column, nor right of the third column? Why is that? Thank you.

Administrator Daniel Scott - 4 months ago

Hey Jason, it's there. but because the padding is added to the very generic '.col' tag. It's appling to the columns above and below it. So that all have the 1%. So they all line up 1% in. So they all look like they have no 1%. Does that make sense?

Jason Carapellotti - 4 months ago

Thanks Daniel. I can't say I fully understand it, but I trust it. I don't want the padding to show up on the outer sides either, so hopefully I'll get the same result.

Anne Carpenter - 4 months ago

Hi Dan, What if you wanted to put an image with some text underneath in each of your 6 cols?

Administrator Tayla Coman - 4 months ago

Hi Anne, you should just be able to put a p tag beneath the div that contains the image can't you?

Tina Ricaurte - 4 months ago

I have gotten this far (got my 6 pictures up) but from another of your tutorials I have added a footer along with facebook link to my site. Unfortunately my footer is ending up next to the photo at the top containing my heading and subheading. How do I move that footer back down?

Administrator Tayla Coman - 4 months ago

Hi Tina, can you please zip up your site and host it on Dropbox, then send me the link so I can check it out?

Tina Ricaurte - 4 months ago

That was a first for me. I hope I did it right. Here is the link. Thank you! https://www.dropbox.com/s/fstomb25s76ysf9/help%20with%20website.zip?dl=0

Administrator Tayla Coman - 4 months ago

Here you go Tina, I've made the changes, which was moving the location of the footer and adding 2 lines of css styling to the footer. https://www.dropbox.com/s/b6kc8zp5klfuhq7/tina_ricaurte.zip?dl=0

Tina Ricaurte - 4 months ago

Thank you so much Tayla! It works, I am no longer stuck and I will keep on going! Learning to code is super fun!! Challenging but still fun! Daniel is a great teacher and you are a huge help!

Administrator Tayla Coman - 4 months ago

Absolutely no worries! Glad we're able to provide such an enjoyable experience!

Rodney Love - 1 month ago

Hey, I have also tried to create a footer at the bottom of my page. But it ends up displaying under my header. Also tried to put a banner box under my grid images with a small amount of text, hoping the box would span across the page. My page does not seem to hold its structure (rows stacking on top of each other, with content sitting inside ). But it holds structure when I remove "float:left" from .col Hope this makes a bit of sense! haha. Please help. Thanks in advance. Dropbox link https://www.dropbox.com/s/iux4ydo4s6vlvls/rld-website.zip?dl=0

Administrator Tayla Coman - 1 month ago

Hi Rodney, are there any differences between your code and Daniel's at the same point in the build?

Albert Turi - 1 month ago

I like the approach and pace of your tutorials. Is there any reason why you did not use Bootstrap with Dreamweaver 2017 in this tutorial? Your DW 2015 Tutorial with Bootstrap is excellent.

Administrator Tayla Coman - 1 month ago

Hi Albert, we try and cover all types of builds so we thought a pure html and css build might be interesting for some seeings though we'd already done a Bootstrap course. Thanks for your wonderful feedback though!

stefan - 1 month ago

Hello When i put in .col { Float: Left } It blocks my Hero and places its self to the right of it. Could you pin point where i am going wrong ?

stefan - 1 month ago

Hello When i put in .col { Float: Left } It blocks my Hero and places its self to the right of it. Could you pin point where i am going wrong ?

Administrator Tayla Coman - 1 month ago

Hi Stefan, have you compared your code to Daniel's in the "completed files" ?

Video Transcription

Okay, in this video what we're going to do is we're going to add these grids down the bottom here. So, let's go ahead and do that. Let's jump into Dreamweaver. We're going to get inside these columns here, so what we're going to do is, inside this column, we're going to put in 'img', like we did before, then we hit 'tab', and we're going to click 'images'. Go into this folder.  Now, we don't have them in the folder yet, so we're going to click ‘browse’. So we'll go to my desktop, find the downloaded exercise files under images, and here we're going to go to ‘thumbnail1’. Nice. 

Make sure, whenever you put an image in, you put the alt text. Remember it's for the visually impaired, it's for people using screen readers, and also for Google. I can't remember what this image is. ‘Love Image’. Very exciting. And, can we see how we want to do it. Let's check in the browser. Check the right one. Here he is there. I've made mine a little bit bigger. Why? Because I just like that they can resize when they get down to-- can you see when they get down to mobile, and actually gets quite big. So when you're styling these ones, make sure you use-- because we're using these images through all three sizes, and just make it just responsive, so just to make sure your image is big enough for however big it's going to be. 

So, next is, what we might do is, just duplicate that ones. So we're going to delete all these guys. Have my cursor, you can copy and paste it. It works. But a cool shortcut is, put your cursor anywhere in around here. You got 'command-D', or, if you're on a PC, do 'control-D'. And just go, 'control-D, D, D, D'. We got all our little guys. And what we need to do is, switch these out. Now, I can't just go and change the text here, because, remember when we were in here, we were in browser, and actually copied it into my folder. I need to go and move them. Let's go and check this out.  

So, I'm just going to type-- this is the website. and these are the images, and there's the guy to get copied. This is my folder of exercise files. And I'll grab all of these guys. Come on in here, guys. Oops! Can't see you. I hate this about a mac. They're in there somewhere. We need to go to the images folder. Get in there. Great! Okay, so there's all the images. So, now I should be able to get into here. Sometimes you need a-- there's one here, it's got to be ‘thumbnail’. This was thumbnail. Sometimes it just doesn't. Because I've just copied it in the background there. I might have to, it's just not appearing. So, I'm going to hit 'save'. And there is a refresh, so it's up here, 'F5' on both the Mac, and the PC. Getting there. 

Now, one thing you need to do is, I'm just copying these all. Just generally, you should change the alt text for all of these. It's really important. Important enough, but I'm not going to do it now, because I am just doing a tutorial, it's not my actual site. So, go to you guys. Let's check them in the browser. So they're all in. By default, they're all stacked on top of each other, so what we need to do is get them to collapse next to each other, so they stack up. So, we're going to do that, and let's go into Dreamweaver and do that now. 

Okay, so to do it what we're going to do is-- we're going to use-- we're going to 'class'. 'Class', earlier called 'col', where you're just going to say-- free flip all these 'col's to the left, and they will stack next to each other. We did 'float's earlier on, and we floated the navigation, remember to the right. It floats over this way. If we float it to the left, they will keep stacking up next to each other, because by default they stack underneath each other in line. 

So, let's go into our 'styles.css'. It's somewhere at the top here. Doesn't really matter where it goes. I like to put these kind of big things at the top. Now, remember this is the 'class', so I forgot to put the 'dot', curly braces '{ }'. Let's go 'float'. And we're going to go 'left' in our image. Let's have a look. So they float. There's not enough room for them all to get in there, but they get mostly in there, so what we're going to do now is create another class that's going to make them-- we can divide this into three parts, so let's go ahead and do that.  

Now, this bit we're going to do now is, working with something called the 'grid'. That's the kind of overall term of dealing with this positioning where we get them to stack, one way, in the desktop, and then the other way, in tablet, and then we get to mobile, so we're dealing with this thing called a grid. So, what we're going to do to make this thing work is, we're going to create a 'class', and we're going to call this one a 'col-lg', large. And it's pretty typical to call desktop large, tablet medium, and you've got small, and then you can have the extra small as well.  

So we're going to use this guy, and what we're going to say-- this is going to be quite easy, we're going to say, you have a width of-- now, we could do 33.3%. Okay. And 'save'. We thought it's going to work. So, we've created it, but we haven't applied it, so, we've created this thing, and I go over here, and we're going to apply it to this 'class'. So we got one class called 'col’. We're going to apply the second class. You just put it in there, you stick them next to each other. That's how you apply more than one class. You don't have to write out 'class' again, you can, but you just put them in between these quotation marks, with the space in between. Great! I don't want to do-- I want to do it for all of them. So there's a cool little trick that Dreamweaver does.  

If I click here, and hold down the 'option' key on a Mac, or the 'alt' key on a PC, and click and drag. Can you see I got a cursor-- multiple cursors. How cool are they? I love it. 'col-lg'. Let's apply them to all. Great! Now we're getting to where we need to go. It's kind of working. Okay. So, the columns are all the right width. But these images aren't being responsive. So, by default, these images are being their exact size. The columns are the right widths, but the images are kind of squared out over the edges. Let's go and fix the images so that they are at 100%.  

So, to make our images responsive, we're going to go to our 'styles.css'. I'm going to create a 'class'. Where? As long as it's in the global heading-- Where am I going to put it? I'll put in with the columns that I've made. And we're going to do another compound selector. We're going to say, 'images' that are inside my col hyphen large 'col-lg' are going to do this. And we're going to say, this guy is going to have a width of 100%. And what we need just to make things responsive is we need to add our height to it as well, just put it in 'auto'. That will save you some problems later on. This will automatically pick the height. And the other thing that makes it useful is 'display: block'. Why? Just because.  We did responsive images, made the width100%, makes sense. Put the height in display though, and I'll make them-- Yes, it will make that work.  

So, let's have a look in the browser. Okay, getting there. Nice! So the widths are right, and-- so the widths are 33.3%, and they will stack next to each other. What I'd like to do-- and the images are responding. So what we need to do now-- because you can see, 33.3% is great because it stretches now when it gets down to tablet.  

Next thing I want to do is-- actually my mock-up has padding in between these. Let's add a little bit of padding to it. So I have done the padding in this case, and I have, instead of using this 33, there's not enough room for paddings. We need to put this down a little bit. So I've taken like, 2% off the overall size, and what I'm going to do is, I'm going to use it for here, and I'm going to do some padding. And we're going to put padding all the way around, and we're going to do 1%. We use that 1% around here, and it just means that-- Let's have a little look. So there's 1% around it.  

Great! So, 1% either side, let, right, up, and down, around these columns, and the rest-- if you leave, I guess just to make my point here, if you leave it at 33, there's not enough room, so 33 plus the 1% in between kind of pushes this guy off. What we want to do is make sure there's enough room here, so when you're doing yours, yours might be, say it's 4, you're going to be using 25%. If you got 4 across here, and you're going to apply it with different percentages to whatever works for you. And, you got to have to minus-- whatever you've used for padding, minus it off the width here. Yes, they're a bit of playing back and forth. 

Great! So we've made a responsive grid. Looks good there. It looks-- When we get down to tablet though, what I'd like you to do is, I want you to switch from-- this is our working version. So, when it gets down to tablet, I want to switch into these two columns here. At the moment, it doesn't, it stays like this, so what we're going to do is, we're going to create another class, so we'll do it, but instead of putting it under the head here, we're going to create it, so it only gets triggered when I'm in my tablet view. So anything in this media query only gets activated at the time where I'm maxed in, within this width here.  

So what we're going to do is, we're going to create a new file called 'col-md', for medium. And this one here is going to be 25%. When I say 25%, what I meant is 50%. But we're going to have this slight problem, and there's a reason I just typed 50 by itself. I always type in the full thing. So this is going to be your width of 50%, but because we got that padding applying, let's have a little look. It's not working. Why is it not working? That's because we created it here. We created this 'col-md’ but we haven't applied it to anything. Another routine, I did that on purpose, not that I totally forgot. And source code here, we've got this thing called col large, ‘col-lg’. We also need one in here, called col medium, ‘col-md’. Remember our trick, click in there. Hold down the ‘option all’ key, 'space', and let's type in 'col-md'. Okay, so we've created it, we've made it. Let's go ahead and check it. 

And, it doesn't work. Remember, 50%, but because we got padding in there, we need it to be a little bit smaller.  This is where you can go in, and play around with, and, I'll use '48'. I’ve already done it. Great! So, it fits in there. Watch this. 

So, at desktop, it's three across, and when it gets down to here, it's two across. Now, the last one we need to do, is when we get down to mobile, is, I'd like it to be 100% across. So, let's go ahead and do that now. So, we want to do two things. Our mock-up has the mobile view, they're all 100% across, so we're going to stay down here. We're going to create a class called col small, 'col-sml', and this one's going to be a 'width' of --  not a window-- going to be a width of 100%. Great! Syntax is getting a bit wayward. Let's go apply it using our cool trick. And we're going to be col small, 'col-sm'. Great! Let's check it in the browser. And it's going to be a little bit broken, because-- no it's not broken. But I want to get rid of this padding in between, because I want it to be-- my mock-up just has a little budding up next to each other.  

So what we're going to do is, in here-- Let's go to our 'styles'. And at the top here, we said, column had a padding, so 'col' had a padding of 1%. What we're going to do down here, is I'm going to say-- that same class, we're going to say, you 'col' have-- You have a padding here as well. Padding of '0'.  

Pixels, or percent doesn't matter. '0,0'. Great! They're all budding up next to each other.  

Awesome! Look at us. You can start to see-- We're making responsive stuff. And when you look at somebody else's css, and you kind of look at this for the first time, you're like, 'Wow!'. Okay, that's pretty complicated. You go into here. That was not too bad. Just make sure of all the tabs and all the returns. There's lots going on in here. But you can start to see. If you start chipping away at this thing, one little class at a time, so actually, I think, quite simple.  

What else do we need to do? The last thing I think is just the background color. So, I don't know, not a big deal, I guess. So we're going to do it to the body. So, the background color, let's go 'background-color', and I'm just going to pick a light grey, because that's what was in my mock-up. And ‘DDD’. Save. So, background color, you can see, it's just kind of like a slight grey in there. Cool! 

All right. Well done, us, and me, and you. Okay, we made a website. We made-- the big thing is this navigation here. It responds. Once we learn that kind of responsive stuff, with that media query, it actually became quite easy to do these. So, there's our tablet view, down to desktop, our lovely nav-sandwich, and we've got our little images going. Bravo! 

Little things I would do to touch this up, you can see on mobile here. The paddings probably a little bit big for this one. So what you do is, you find the class that goes into your hero box. It's at the top here somewhere. There’s something called hero. You make another class, and you just change the padding, and override it, and make it smaller, and you go ahead and finesse all of these things. Maybe the fonts as well. It's a bit big, because I broke some into two lines, so, get to your h1. Make another 'h1' down here in mobile view, and override the font size. Lots of those little tweaks is kind of where I guess you as a graphic designer really shines. All those little 'finesse'ing in terms of the spacing after, and the space between the lines, and all the font sizes, and things. Cool! All right. No muffling. Let's go on to the next video.