Design comparison
Solution retrospective
I was very confused when I needed to break the desktop image and fill the void with the phone version, I spent a lot of time typing ''display: none'' and trying to fill it somehow, but I managed to solve it myself using the ' tag 'picture'' that I hadn't put before was just 2 ''img'' tags.
I had a lot of difficulty with responsiveness where I had to make the content smaller to be centralized, I spent 3 hours coding and I am very exhausted from thinking so much. But I think I got a nice result.
I would also like to ask for opinions about my lines of code, I want to know if they are readable, if you can read them in a pleasant way and if there is not a lot of disorganized stuff.
Community feedback
- @sarfarazstarkPosted over 2 years ago
Hell yeah its take but i just did it use display unset in mobile view img in media queries and it worked
1 - @Amir837Posted over 2 years ago
Text inside the button can be selected. You can prevent this by setting user-select property to none, more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
0 - @Enmanuel-Otero-MontanoPosted over 2 years ago
Hello Alephy
I would recommend that you develop first for devices with small screens what is usually called mobile first, after all, today the web is browsed more on cell phones than on computers and it also seems to me that it is easier to adjust in this way design for the largest screens.
About the other. Your HTML code is good, easy to read. If I would recommend that the class names be more descriptive, in larger projects you will appreciate it and they will thank you for someone else who has to review your code.
Greetings.
0 - @snowbot22Posted over 2 years ago
Use the picture label in your html file, with this label you can switch imgs in differents breakpoints. See more in: https://developer.mozilla.org/es/docs/Web/HTML/Element/picture
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord