Skip to content
OverviewSolutions
8
Comments
3
pmigix
@pmigix

All comments

  • pmigix•110
    @pmigixPosted 12 months 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 about 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
  • Antoniel Aureliano•140
    @AntonielAurelianoSubmitted about 1 year ago

    Challenge solution carried out using CSS and Flexbox. I had doubts about the use of semantic html when developing the challenge. Because in the challenge, from my point of view, there is no field that would be the header, just a section and the footer. When in doubt, I chose not to use semantic html. If you could clarify this issue for me, I would be very grateful. p.s.: This is my second completed challenge. I'm quite excited.😁

    product-preview-card-component-main CSS FLEXBOX

    2
    pmigix•110
    @pmigixPosted about 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