Got a problem with my a href links

1

I’m trying to make my elements go side my side underneath the main paragraph. They would ideally be pictures with clickable links to other pages on the site but they’re hidden down at the bottom left just above the footer. You can see the html and css here http://codepen.io/timmparsons/pen/yaBjKx

any help is greatly appreciated.

Thanks

2

Hey Tim, if your problem is that you cannot see the Pool, Garden, backyard links. Its because your elements are styled to be white text as for your navbars with the black backgrounds. So on the white it wont show up.

a { display:inline-block; margin-left: 20px; color: white;

Try some other elements for your links like buttons or wells or even just images. Check this out : CSS3 Responsive Image gallery

Hope that solves it.

3

Thanks @Terblanche

I have the pictures up now. IS there a I can group them together so they all move together and keep the spacing?

I’d like to move them up too, so they’re closer to the paragraph writing and then have the footer just a little below the pictures. Any suggestions? http://codepen.io/timmparsons/pen/yaBjKx

4

on codepen it seems to be ok but when i use brackets, it looks like this

Pasted image1365×469 460 KB

5

Hi Tim. I think that looks pretty cool with the overlap! But for your purposes I THINK (but not 100% sure) its that your body div is specified to be 400px high. So your images are pushing over that division with the flex box. Its a bit difficult to see because when I look at the site I cannot see any pictures. Maybe just make it 100% and see what happens?

By the way someone pointed me towards cloudinary, a very nice place to put your pictures and stuff that is accessible for codepen.

I guess you can put the pictures in some bootstrap grids using the div row and div col tags. But I think that CCS images gallery I proposed earlier would look pretty cool with the site.

Another thing a friend pointed out to me: Inspect element. Not sure if you know this one. If you put your pen in full page view, right click and select inspect element. You can see the elements you used highlighted and it really helps me with layout problems.

Good luck!