Skip to content
OverviewSolutions
8
Comments
3

pmigix

@pmigix110 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • pmigix•110
    @pmigixPosted over 1 year ago

    Congrats on your first challenge solution!

    I noticed your image is missing. You can fix it by saying <img src="./images/image-qr-code.png" alt="QR code"> (./ refers to the current directory.)

    Good luck in further challenges!

    0
  • pmigix•110
    @pmigixPosted over 1 year ago

    Congrats on tackling the challenge!

    I might have some useful suggestions you can play around with!

    1.Don't wrap content in unnecessary div tags, you've already done a great job of wrapping your content in separate sections, get rid of <div class="image-container"> and <div class="info-container">

    2.Your image shrinks before hitting the breakpoint, so to make image fill up the section add additional properties to your .desktop-img { height: 100%; object-fit: cover; } and try setting the breakpoint at 768px

    3.To stop your content from continuously growing on larger screens, on your .main-container instead of setting the width:50%;, try max-width:40rem;

    I hope any of this helped in some way. Best of luck in further challenges!

    Marked as helpful
    0
  • pmigix•110
    @pmigixPosted over 1 year ago

    You've done a great job! One thing I'd suggest is adding the breakpoint at max-width: 768px instead so that the product-image doesn't slide under your product-description.

    0