Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jerilyn P
Jerilyn P
8,788 Points

Lots of CSS questions

Here is the codepen for my code. I am trying to modify the portfolio page project in the first stage of the Front End Web Design track that Nick hosts. He creates a portfolio page for himself but I want various modifications from his page. Because the code gets complicated, I'm lost on how to go back and erase what he did that I don't like and change it to what I do like.

Here is at least a starting list to all my questions and issues. Any advice would be much appreciated. Thanks in advance!

  1.  I want my div "logo," that is, the h1 and h2 that have the name and
       title, to be centered and much larger.
 2.  I want the nav to float right below the "logo."
 3.  All my photos are different sizes, but on the actual webpage, I want 
      them to all be the same size--except the first one, which I want to
      be much larger and float above the others.
 4.  I was getting my gradient to appear in my browser, Safari 5.0.6 (I know, I know--my computer is old and that is the latest browser I can install), before, but now it is not showing up.  Can anybody else see it on your browsers?

I feel stupid.

Thanks!

Jerilyn P
Jerilyn P
8,788 Points

Here is the codepen:

http://codepen.io/anon/pen/xFwnb

4 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Is this closer to what you wanted? I tried to do it with minimal CSS markup, and make it clear what I changed. And yes, your gradient showed up and I'm on the latest version of Chrome.

http://codepen.io/kevink/pen/pezqw

stevengoeller
stevengoeller
2,469 Points
stevengoeller
stevengoeller
2,469 Points

I fixed your problems. I couldn't do anything about the images because I can't see them. http://codepen.io/anon/pen/zqumb

Jerilyn P
Jerilyn P
8,788 Points
Jerilyn P
Jerilyn P
8,788 Points

Both of these are much better than what I had. I will study what you did to find out how to replicate it. Thanks.

P.S. Glad to know the gradient is showing up.

Jerilyn P
Jerilyn P
8,788 Points
Jerilyn P
Jerilyn P
8,788 Points

I figured out a lot of the problems were in the responsive css file I had included, so I just deleted it from the HTML and that made it look a lot prettier. Ha ha. I appreciate y'alls help though. CSS looks much better.

Here is the new and improved page: http://codepen.io/anon/pen/FDLdx

The last thing I want to do with it is change the color of the captions midway, so they are visible against the backdrop. The caption on the third picture completely disappears. There must be a way to do this with an nth-child, right?