All solutions

Okay, I'm going to come straight out of the gate and say I have NO IDEA what I'm doing for the middle area of the screen width. It looks good at 1440px. It looks good at 375px. Anything in between, I'm clueless. I tried for hours to get it to work before eventually giving up and turning to you guys. Can anyone help me with figuring out how to make it not look terrible in those middle sections? Thank you!!

If you're wondering what I'm talking about, go to Chrome's inspection tool, go to responsive mode, set it to 1440px, and just... slowly shrink it. It's terrible. I know it's terrible. You'll know it's terrible. I'm having a painful learning experience right now.

It took me forever to figure out how to do the hover effect with the icon over the main image. I probably did it in a really goofy way. If there's a better way for me to have done it, please let me know!

Also, I know the hover effect isn't showing the same border-radius as the image. It's in my CSS code, but for some reason, GitHub isn't wanting to see it when I deploy the site. Just know that it is there! GitHub just hates me.

Thank you! <3

Any suggestions for how to improve my code are greatly appreciated! I apologize for not having any specific questions; it's late and my brain worked just long enough to get this finished before shutting down entirely.

GitHub and I are about to go a round if I don't figure this stuff out soon. It didn't want to recognize my cart icon despite it being the EXACT SAME as it was on my desktop, and THAT was working.

ANYWAY, my biggest problem with this one was figuring out how to change images based on screen size. I think I figured it out, but if anyone wants to look over the code and see if I did it in a weird/incorrect way, I'd really appreciate it!

It took me FOREVER to figure out how to vertically center the container div. I kinda threw "display:flex" on several different things, trying to get it to work (I'm new at this, if you can't tell). Is there any better way to consistently vertically align things without having to use flexbox, or is that the main way to do it?

Any other feedback is also greatly appreciated! I'm really wanting to get better at this, so feel free to tear my code apart and let me know everything I did wrong :)