Responsive Recipe Card using plain HTML and CSS

Community feedback

• 

  P

  Joshua Hovis•200

  @joshhovisPosted 4 months ago

  Hi Gina! Your project looks good! I looked at your page and I don't think that's an issue you have to worry about. I didn't notice that happening until I reached under 200 px with the responsive web tool. I don't think that there are any devices out there that are that small. If you are wanting to resolve it, I would just set a breakpoint for the size you notice it happening at so like: @media only screen and (max-width: 200px) {} And just set your font size to be a little smaller, I would think that would work. But once again, I really don't think it's anything that you need to be too concerned with

  Marked as helpful

  0

  ---

  

  P

  Gina Wang•170

  @gina-wang-1021Posted 4 months ago

  @joshhovis Thanks for all the feedback and advice!

  0
• 

  Victor•510

  @therealmaduanusiPosted 4 months ago

  nice work! 😊 but what do you mean by this "Once the viewport width is less than the default card width for a certain degree". Especially the to a certain degree

  0

  ---

  

  P

  Gina Wang•170

  @gina-wang-1021Posted 4 months ago

  @therealmaduanusi Hi! Thanks for the clarifying question! I was testing how responsive my design was using live server on chrome when I found out that if I adjust the width and shrink it down to an extreme level (narrower than 2/3 of the card width), the content starts overflowing on the left-hand side. Overflowing in the sense that there's not even a horizontal scroll bar available, parts of the texts simply got covered and can't be seen on the website. I think there might be some issue regarding the text size since I used a lot of px units but I'm not entirely sure where can be improved. Thanks for the help!

  0

  

  Victor•510

  @therealmaduanusiPosted 4 months ago

  @gina-wang-1021 Hi, ok always be careful on your height property if you're using a relative(%, rem, em e.t.c) or fixed(px) unit, try adding it to the container of the card.

  0

  

  P

  Gina Wang•170

  @gina-wang-1021Posted 4 months ago

  @therealmaduanusi understood! Thanks for the advice!

  0