All comments

• 

  Anay-208• 20

  @anay-208

  Submitted over 1 year ago

  Hi, I’ve made it unoptimized for mobile due to the fact that: it’s difficult to change image on src a It requires a square image as most sites do

  If I get a square img, I’d be easily able to do this

  Please let me know if I did it right By not making it mobile usable. If I ever need to use it for production, I’ll be using square img and optimizing it

  

  Product preview card component unoptimised for smaller size

  1

  30

  

  Ricardo Halmoguera• 240

  @RickHalmoguera

  Posted over 1 year ago

  OK, the solution to the image issue would be to use the <picture> tag, which will display one image or another depending on the browser width, without the need to use media queries.for the image it. You can find the info here. https://www.w3schools.com/tags/tag_picture.asp

  and the code goes like this: <picture>

  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width:465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>

  0
• 

  Kayyrbek Perdebekov• 130

  @kayyrbeks

  Submitted over 1 year ago

  Hi again, everyone! (*￣０￣)ノ

  Today I finally finished my next project and I have some questions:

  • Should I use relative units in image size? And border-radius size? (⊙_⊙)？

  Thanks for attention! 😊

  

  Product preview card component (use only HTML & CSS)

  2

  92

  

  Ricardo Halmoguera• 240

  @RickHalmoguera

  Posted over 1 year ago

  Using relative units in image size and border-radius size can help ensure that your design remains responsive and adapts well to different screen sizes and devices.

  For image size, it's recommended to use percentage values (e.g. width: 100%;) or viewport units (e.g. width: 50vw;) instead of fixed pixel values. This allows the image to scale proportionally to its container and adapt to different screen sizes without distorting or overflowing.

  For border-radius size, it's also recommended to use relative units such as em or percentage values (e.g. border-radius: 50%;) instead of fixed pixel values. This allows the border-radius to scale proportionally with the element it's applied to, ensuring that it looks consistent and visually pleasing across different screen sizes and devices.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  YohannDCz• 90

  @YohannDCz

  Submitted almost 2 years ago

  I succeeded in creating desktop, tablet and phone responsive design but I failed in managing transition over those. Any suggestion ?

  

  Skilled e-learning landing page

  1

  30

  

  Ricardo Halmoguera• 240

  @RickHalmoguera

  Posted almost 2 years ago

  Hey! For this challenge you want to use the Picture Element not the Background Image Property.

  You can find more info here: https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  The sintax you will use is this: <picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>

  Keep the good work!

  0