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
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>
Hi again, everyone! (*￣０￣)ノ
Today I finally finished my next project and I have some questions:
Thanks for attention! 😊
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.
I succeeded in creating desktop, tablet and phone responsive design but I failed in managing transition over those. Any suggestion ?
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!
