Skip to content
OverviewSolutions
19
Comments
6
Martin
@mvelardeq

All comments

  • Martin•450
    @mvelardeqPosted over 2 years ago

    Good job irvine and i like your video. Maybe you could change the width in ".card" selector in breakpoint 640px like width: min(90%,350px). You could try it and comment

    Marked as helpful
    1
  • Marit•400
    @MaritxxSubmitted over 2 years ago

    The main issues that I came across were regarding best practices. Specifically when to use headings (h2, h3, h4, etc) over paragraphs, spans, or divs when it's not a 'conventional' webpage with several clear sections.

    Along with that, I am wondering if this was the best way of implementing the responsive design. I found myself preferring to work by creating the desktop layout first. Would this cause issues in general?

    Would be happy with any feedback as I'm just starting out.

    Product preview card using Flexbox

    2
    Martin•450
    @mvelardeqPosted over 2 years ago

    Excellent!. I only notice that cart icon doesn't align with the text in button, maybe you could write in "a" selector display: flex, justify-content:center, align-items:center and gap:1rem. Maybe there is a short way, i don't know.

    1
  • Martin•450
    @mvelardeqPosted over 2 years ago

    Good job charles. for responsive card only write and especific width of "main-card" class in css, not percentage. for example width:370px. Try it and comment

    Marked as helpful
    0
  • Martin•450
    @mvelardeqPosted over 2 years ago

    Good job christopher, only i notice that cart icon repeat the images, you must write background-repeat: no-repeat, and center the image and maybe background-size:cover o contain

    0
  • Lohit Yarra•30
    @lohityarraSubmitted over 2 years ago

    I want to get feedback on how to scale things downs without using a media query. I know I have to use a media query to replace the image more suitable on mobile devices, but in the case of the text, I want it to scale naturally. For example, my old strikes out price is overflowing and when you go even small all the text overflows.

    I will try to make changes in the future If I come across this in future and rectify it. But help is appreciated.

    Product preview card component

    1
    Martin•450
    @mvelardeqPosted over 2 years ago

    Hello Lohit, your error was put percentage of width in card class, you have to set and specific width like 580px, for height is similar. then add breakpoint when your screen are almost wider of your card's width. In this breakpoint change the colummn direction using flexbox to flex-direction:column

    Marked as helpful
    0
  • Judith•40
    @Sefure91Submitted over 2 years ago

    The most difficult part is to make it responsive for mobile and monitor. I tried many solutions I found on the webs, none of them seem to work. I'm not sure where I did go wrong there.

    production preview card

    1
    Martin•450
    @mvelardeqPosted over 2 years ago

    Good job Judith, in order to show the border radius of images, you must use overflow:hidden in image selector, then you have to use class selector intead of id selector in css, id selectors are used for javascript. For responsive design you have to change the flex direction of card component of row to column in 600px breakpoint (if the width of card is almost less width than 600px). Sorry for my bad english xD

    Marked as helpful
    1