Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Website with Grid

@Coltensiemer

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Second Attempted. Fixed image on small screens and media query!

What is a great why to test different view sizes? Do people normally use a browser extension? Website? Please share so I can learn!

Community feedback

Samuele 170

@frasconi00

Posted

Hi Colten, welcome to the front-end mentor community!

I really like your solution, you did a good job.

I just wanted to tell you my way to test different view sizes: I use the developer tools of my browser (which is Google Chrome). The keyboard shortcut for it is CTRL + SHIFT + i.

You can resize the screen as you like, and you can also test what your page looks like on some mobile phones or iPads and so on.

Hope this was helpful! Keep it going and bye for now😊

0
Adriano 34,090

@AdrianoEscarabote

Posted

Hi Colten Siemer, how are you?

Welcome to the front-end mentor community.

I really liked the result of your project, but I have some tips that I think you will like:

I noticed that the content is not centered, to fix this we can do the following:

I removed this code:

main {
    /* margin: auto; */
    /* overflow: scroll; */
}

@media (min-width: 750px)
body {
    /* margin: 100px auto; */
    /* padding: 100px; */
}

I added:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min height: 100vh;
}

The rest is great!!

Hope it helps...👍

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord