Sunnyside agency landing page built using vanilla js, HTML5, and CSS3
Design comparison
Solution retrospective
I'd be incredibly grateful if the community can give me feedback on the responsiveness of the page and also on the HTML markup after review of my code.
Community feedback
- @zoldyk15Posted over 3 years ago
1. Width at 1440px:
- The layout is broken in the egg image part. I suggest you place a max-width container of 1440px so it will not expand beyond that.
2. Width at 280px:
- The "We are Creative" text is being cut
3. Mobile view:
- Images loaded are still in desktop. Should replace to mobile images if it hits the mobile size as it reduces the amount bytes the browser will read.
- The left triangle at the top-right corner of the hidden menu box is a bit separated on the ff. dimensions in pixel (W x H):
- 411 x 731
- 411 x 823
- 375 x 667
- 414 x 736
- 280 x 653
at first, I thought this issue is apparent to 414px width and below, but there is a dimension (375 x 812) where the left triangle sticks to the hidden menu box. So I guess it factors the combination of width and height.
Tested it in chrome browser and its list of mobile view options in developers tool for your reference.
1@uzowayPosted over 3 years ago@zoldyk15 thank you for the detailed feedback. I didn't design for screen sizes below 320px, might be the reason the creative text cut on 280px. But I'll do that right away. I'll head back to fix the other issues you have raised.
Thanks!
1 - @TrakaMeitenePosted over 3 years ago
At the second section starting with egg, make the image as - background image, background-size:cover and no repeat( to all images in the containers), so it fits the container. ON my screen (bigger than 1440px) it is smaller than the view width.
You've done a great work, keep coding :)
1@uzowayPosted over 3 years ago@TrakaMeitene okay thank you so much for the feedback.
0@uzowayPosted over 3 years ago@TrakaMeitene I've just fixed the issue you raised. You can check back just to confirm. Thanks again for the feedback!
0@TrakaMeitenePosted over 3 years ago@uzoway oo it does looks better now. Only cherry pic is repeating .
As well on mobile view the triangle on menu , it makes space between the triangle and container, so do : top:-1rem; But it makes some difference on laptop screen- so you should fix it and it will be just fine :)
0
Please log in to post a comment
Log in with GitHubJoin 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