10 - Adding our image grid


Questions & Comments

ron labbe - 3 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 - 3 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 - 3 months ago

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

ron labbe - 3 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 - 3 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 - 3 months ago

Sorry, your #logo ID.

ron labbe - 3 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 - 3 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 - 3 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 - 3 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 - 3 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 - 1 month ago

Yeah - high five Tayla. You're awesome.

Jason Carapellotti - 1 month 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 - 1 month 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 - 1 month 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 - 1 month ago

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

Administrator Tayla Coman - 1 month 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 - 2 weeks 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 - 2 weeks 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 - 2 weeks 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 - 2 weeks 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 - 2 weeks 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 - 2 weeks ago

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