CSS styling not working

Hello, I’m working on the personal portfolio project and I’m running into an issue in the “contact section” of my page. I am trying to style this section but none of the css selectors are having any effect on the html I’ve written.

I’ve passed all the tests but I am just unable to style this section.

I’ve looked through my html and made sure I’m using pertinent classes and id’s.

Any help is appreciated. Thanks!

Here is my codepen link - https://codepen.io/dogfunk_55/pen/PoJWBgL?editors=1100

Your code so far

** browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

I was able to style it fine. A few things in your css confuse me. You have media queries up top, but then you have a random query in the middle of your other css. You seem to be mixing inline and external css for some reason.

  1. I fixed the issue by changing the content selector class from contact-section to contact-links. If you’re using flexbox you want to use the parent container which would be contact-links. contact-section would be like the grandparent.

  2. I removed your html inline styling from the contact header, and added that to the css. Doesnt make sense to have inline and external styling.

  3. I got rid of the contact button css. Its not needed.

  4. This part is up to you. I added flex-direction: row; to the contact-list. Putting all the links on the same line. If you go this way you need to find a way to grab all the links inside contact-list and give them space between each other. Im not gonna give you all the answers, so its up to you to figure it out.

Hey there,
for me, it was the media query you put in the middle of the styling that caused the problem. As soon as I removed it, the contact section started responding to styling rules.
From the short experience I got from studying, I was taught to put media queries in the end of the styling to avoid missed closed brackets, and to also help myself with structuring, hence shortening quite a bit troubleshooting.
Another suggestion I would make, if I don’t make myself sound too presumptuous, would be to avoid inline styling as much as possible. It helps keep your html clean and thus focusing on troubleshooting in the styling section.
Again, I hope not to sound presumptuous, I’m a newbie myself and only wanted to share what I have learnt so far. :upside_down_face:

@Cody_Biggs thank you! I tried using the contact-links selector previously and wasn’t able to get it working. The html I threw in there just to see if there was anything I could do to get it to move. Okay I’ll try out the flex row and see how i like it. I appreciate your help!

@metropon oh i see. thank you for pointing that out. I’ll take note to put media queries at the end next time. I threw the inline style in there just to see what else I could do to make the “contact me” title move. Thank you for your help!

1 Like

No worries, I can see you making some changes, and you are getting close. I have to apologize though, I guess I did not use flex-row. I think I tried when they were originally stacked on top, but the justify content is the way to go on that.
Here is what I had with my solution that I was talking about
flex

1 Like

You have a lot of padding and margin on .contact-button. I would suggest you remove that (you can keep a few pixels of padding) then make the parent a flexbox container and use gap to create the spacing.

.contact-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
}
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.