Design comparison
Solution retrospective
Fun and tricky project.
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hello Dewan Md Shakib al-mujib, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:
- Add a
background-repeat: repeat-x;
, the image will repeat on the horizontal axis, preventing it from breaking. - Add a
background-size: 100% 50vmin;
, the50vmin
will set its height as the page target, and100%
will make it stretch on the horizontal axis.
Feel free to choose one of the two!
images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty
alt=""
and addaria-hidden="true"
attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.The remainder is excellent.
I hope it's useful. π
Marked as helpful0 - Add a
- @eewa-SANJPosted almost 2 years ago
Overall your solution is great but there, but you can make some improvement Here are my findings
- Missing the box shadow on the "proceed to payment" button
- Missing the provided font in the "proceed to payment" button text where different font family is being inherited
- Does not change underline in the "change" link when the mouse hover
- When you writing CSS, try to format each property according to alphabetical order which is for readability but the only suggestion
These are,y finding and try to fix them if you can possible.
Marked as helpful0
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