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

[glsnlt]

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 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

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

freeCodeCamp.org

[Losarig]

@glsnlt

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

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

[glsnlt]

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

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

[Losarig]

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 !

[glsnlt]

Definitely learnt that from experience here Thank you