All solutions

This was my first time using CSS Grid, it seems to have worked out well, except the responsive part. I had to use more than I wanted too media queries as my grid wasn't responsive for some reason even after messing around with the minmax(), auto-fit, and auto-fill.

• If you have a solution to fix that and make my life easier, let me know. Thanks!

I had issues with the purple line underneath the image. As I added the purple overlay, and the purple line appeared. Feel free to take a look at my code, you will notice there is no margin or padding getting in the way so I am really at a loss as to what is causing that issue. Thanks!

• be sure to check out the live site and resize the window to see the responsiveness in affect! Thanks!! :)

Please read the README file in the github page. Thanks! :)

• resize your browser to see the responsiveness in affect.

• Happy Coding!

Ok so I had troubles with the hover effect over the main image, as well as making the eye icon appear over the main image with a hover effect.

Does anyone have any solutions for that? Thanks!

My 3rd Frontend Mentor Challenge, this time I am building a landing page. This will be the first landing page that I have built. Built with mobile design first in mind. I like to finish the mobile version first, then I set the media to min-width: 800px, and design the desktop version from that.

Web design will always be continued learning. As the years pass and technology grows, things will change for the markup language and web styling, that's why I will always be learning. But for now, mobile first, responsiveness, CSS Grid and Flexbox are what I am currently working on right now.

Update:

• Having issues with Github updating the live site.

• Cannot seem to keep the button in place when screen is larger than 1440px. Would anyone have a solution to that? Thanks!

<b>Resize</b> to 1440px and mobile version to view actual product.

My main question, how do you create a responsive layout with Grid, with only 1 column? I seem to be having troubles turning my projects into mobile friendly ones. Any comments or tips would be greatly appreciated!

Update: Was able to fix the responsiveness and layout of my solution thanks to the help of other community members! By removing width, and height from the background itself, all was well!