Help me with my grid issue! - Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Hello, I am trying to build the personal portfolio page, however whatever I do I can’t make the project icon items get into rows when the screen width is wide enough. I’ve changed the grid format in CSS so many times but nothing works :frowning: Can someone please help me?

I put the current entire code in codepen for easy viewing: https://codepen.io/glsnlt/pen/ZEPLrMj

This is my current CSS section for the grid. I’ve tried multiple column configurations, I’ve even tried flexbox instead of grid but nothing I have done has made the project icons move into side-by-side orientation on a bigger screen :frowning:

Thank you in advance.

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;
}


.project {
  background: var(--main-purple);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Hello !
After scrolling through your HTML and CSS for half an hour, I noticed that on line 26 of your HTML, you have a class of project-grid, while in your CSS on line 160 you wrote .projects-grid with an “s”. I don’t want you to rage, but I think your problem comes from a typo :smile:

1 Like

THANK YOU!!!

I’ve been wracking my brains over this for hours and kept on thinking why nothing I change ever works!!!

I’m so grateful, thank you for bringing this to a close for me!!

The irony is today I also noticed that yesterday I spent hours wondering why my scroll behaviour code wasn’t working… Turns out it’s because I spelled it with a u :smiley:

My goodness I’m so relieved, thank you so much!

1 Like

You’re very welcome !
If nothing you change works or even changes anything on your layout or style, check for typos, missing curly brackets or missing semicolons, it’s very frequent !

1 Like

Definitely learnt that from experience here :slight_smile: Thank you

1 Like