Product Page Preview Challenge

Hi Matthew Lancaster, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

flexbox:

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

grid:

body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

The rest is fantastic.

Hopefully, you'll find it helpful. 👍

Hey @Matthew 👋, here are some suggestions that may help you with this challenge

• to change product image based on viewport width you can use picture and source elements inside HTML file. This resource: Responsive Images helped me to implement this in my solution.

• inside your .container class you can change flex-direction to column when width is less than 768 px so the image would be displayed on top.

• additionaly inside media query you are using > to apply styles to img element that is direct child of the element with .container class.

.container > img {
      border-top-left-radius: .625rem;
      border-top-right-radius: .625rem;
    }

This rule is not applied because direct children of .container are divs with .column class. You can change this to .container > .column > img then top-left and top-right border radius will be applied to image.

I hope this is helpful, Happy Coding😀