Design comparison
Solution retrospective
Although the responsive design works across desktop, tablet and mobile as it reaches the breakpoints I would make it more responsive so the images and text change in size between designs.
What challenges did you encounter, and how did you overcome them?I had some issue with the source and the srcset attribute not loading the correct size images, only used these once or twice so I'm still getting my head around the how they fully work. I've had issues before where it doesn't load but have read sometimes the image gets cached and doesn't load the alternative one when it should. This method doesn't seem that reliable...
What specific areas of your project would you like help with?In the screen shot it seems to be loading the tablet image but seems to work fine when the site is viewed in a browser, Any ideas as to why this is? Thanks...
Community feedback
- @DavyZanePosted 26 days ago
I am very impressed with the accuracy of your solution with the design, it is a really meticulous work. //// The transitions work but are a bit abrupt on intermediate screen sizes. I do not place the transition points like you. The goal is to design for 3 screen sizes, 1440px, 768px and 375px. In my opinion this does not mean that the transitions of the media queries must be made at these values. I would have placed them for example at 1000px and 500px. The desktop (1440px) is greater than 1000px, so well designed - the tablet (768px) is between 1000px and 500px, so well designed too - and the phone (375px) is less than 500px, so well designed as well. Choosing transition points between the screen sizes for which we design allows a smoother transition in my opinion. //// I did not succeed to manage the different image sources for the hero like you. Instead I inserted all the hero images in the html file. Then in the css file I displayed or hid the images according to my need with the function {display: block} when I want the image to appear and {display: none} when I want to hide the image. I don't know if it's a good coding way but it makes things extremely simple. // Finally, I have no idea what's going on with your screenshot, but on a web page your site works perfectly! Very good work, keep it up!
Marked as helpful0@WB52Posted 25 days ago@DavyZane I agree with you about the 3 screen sizes not needing to be at any certain breakpoints, I find myself deciding at what breakpoints I think suit best more now instead of using set points like I did in this project. Glad you mentioned it though as it's re-enforced my way of thinking.
The hero images were a bit of a pain to sort out with the source and the srcset attribute way of doing it, plus I think it can run into problems with loading the different images sometimes. I prefer the way that you did it and like you say it makes things more simple and often simple is best. I like the way your project flows from one screen size to the other. I need to implement that more...
Thanks for taking the time to comment and for your feedback. Hopefully the coffee never runs out :-)
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