Personal Portfolio Project - Need help with project tiles

Does anyone know why the clickabe (linkable?) area on my project tiles goes way beyond my images? I already made the link to be only the image and the caption, but it does not seem to work. A link to my project:

https://codepen.io/horacioromodealba/pen/OrpQgy

Thanks in advance, and I am sorry if I am using incorrect terms

Couple things to note:

  • You define a CSS class for a elements, with a fixed position and all. So guess what? When you wrap the images in an a, that applies to them too. Darn specificity…
  • You wrap the image and its caption in an a, but I might suggest you make that a, then inside that a figure, which contains the image and figcaption. Just a more logical structuring.
  • Your second project? The image tag is never closed, and the a doesn’t have a closing tag.

How you’d fix these issues?

  • Increase how specific your CSS becomes. Instead of defining a style for a tags, define:
nav a {
   /* this will only affect the anchors in the nav bar */
}

#projects a {
  /* different definition here, as it's in a much more specific rule */
}

And the last two, that’s just changing things about. :smiley:

Thanks @snowmonkey! I believe I kind of fixed those issues, or at least from what I understood what the problem was; I would appreciate you taking a look at it again. It is my first time trying a grid layout, and I don’t understand why it works only when I use 1f 3 times, when I only have two child elements. Thanks again!

That was supposed to be 1fr

1 Like

Side note, I would change the padding on your nav a:link from padding: 55px to padding: 0 55px. That would reduce the padding to just left/right. It isn’t a huge deal, unless you (as I did) throw a temporary border on your anchors throughout the page.

I opened the Chrome dev tools, and inspected the a rules, added a 1px solid red border to images… It got a little ugly. I’ll often do that to my pages, simply to try to see “invisible elements” or weird overflow things that are happening.

Do you mean the images of my projects? Yeah, I think I am still having trouble getting all that mess right… Right now I am struggling to size the captions to match the figures; I am sure it is something simple, but I just haven’t figured it out. I will keep working on it and will probably ask you to take a look when I am done, if it is not much trouble. Thanks!

Glad to help. I keep forking your stuff and editing that so I’m not mucking up all your hard work. :wink:

Thanks! Let me know if you see anything that can be improved or fixed

Hey @snowmonkey, I just finished the project with all tests passing… I am going to take advantage of your good heart and ask you to take a look at it whenever you get a chance. Also, I wanted to ask you about a couple of things:

  • On my projects section, it looks like the background does not cover the entire area, and I have been trying to fix it without using the position attribute (I tried , but it really messes the flow of elements). How can I fix that?
  • In one of your previous comments, you mentioned that you opened Chrome’s dev tools and found some errors; I have no idea how to check for that. How can I do that?

Thanks in advance!

Well, second question first - Chrome Developer Tools. To my mind, when first introduced, this was the game-changing feature. When introduced, our only other real debug option was firebug or firebug lite. Devtools made coding almost FUN. You can read the google docs here.

To open them, press ctrl-shift-J on your keybord. If there are javascript errors, you’ll see them here. For HTML/CSS, though, click on ‘Inspect’ to actually see into the HTML DOM tree. You can click on any node in the inspector, and not only see the CSS, but edit it in place.

Its a truly powerful tool, and one that more of us in FCC should know. Go read the docs, you’ll thank me later.

1 Like

I just started working with it, and I found several issues with the code. Would it pick up my media queries, though? It does not look like it. Also, after I fix everything, I am guessing it would not work as good in CodePen? I am assuming it is more important for it to work on Chrome, right?

The two are not mutually exclusive, if it works in chrome, it should still work fine in codepen, and in FCC. That said, all changes you make in the chrome tools are temporary. You’d still need to actually edit and save the CSS in codepen (or your css files when you get to that point). And if you want to test media queries (for example, mobile sizing), I would also suggest using a mobile emulator Chrome extension. I just posted about this very topic in another thread.

1 Like

I will try and make both work first, and then move on with the media queries. By the way, do you know why the background on my projects section would not cover all the visible area?

Yup. You want to add a style to the top of your stylesheet, something like this:

body {
  margin: 0;
  padding: 0;
}

It’s bumping everything in 8px by default (at least, in my browser).

I will keep an eye on that from now on… I want to work on fixing all my projects with the dev tools, and keep pounding on the FCC curriculum. Thanks for all the help!

1 Like

Whew. Glad that worked out. Again, it was only the Chrome Dev Tools that gave me that. I used the inspector (the box with an arrow in the top-left of the ‘Elements’ pane?) to jump to your projects section, which looked fine, then clicked on its parent, the body tag, and noticed the 8px bump-in.

Gotta say, man, I LIVE by Dev tools!