Single Price Grid Card Component using HTML and CSS
Design comparison
Solution retrospective
Hi everyone
I have changed some colours in my project as the text was difficult to read, the contrast was poor
Some changes:
- The .headline,.headlinetwo classes in .white-card class colour have been changed
- The lightcyan-card background colour, "per-month" text colour, button colours have been changed
- The darkcyan-card background colour, paragraph text colours have been changed
Edit after submitting solution: I notice that in the screenshot comparison, my design looks completely different than the one that I tested in my localhost and live browser. I am not sure why it is behaving in this way. Can somebody help?
Any other feedback is appreciated!
Thank you Priyanka
Community feedback
- @IamArshadAliPosted 11 months ago
Greetings @PriyankaRC16
The challenge's screenshot provided to us are captured at a width of
1440px
for desktop and375px
for mobile screens. So, it's important to pay special attention to these screen sizes.You might have a display with a screen resolution of
1920x1080
or something else, which is why the design looks perfect on your machine and breaks in the screenshot, as the screenshot mechanism looks for our design at1440px
width.You might want to consider simulating your screen using the developer tools of your browser. Most of the browsers follow the same path to access the developer tools i.e.
options > more tools > developer tools
or you can simply use the following key combinationCtrl (or Cmd) + Shift + I
.Then set the dimensions of the screen to the desired size and you are good to go.
Hope this helps. Thank you🤓
0 - @NiroopR1999Posted 11 months ago
Hi there,
- When in mobile view, consider removing the border radius (bottom) for monthly subscription box.
- Follow the README.md document instructions and update the README-template.md file. Overall, it looks great. Happy Coding
0 - @yozidstPosted 11 months ago
Hi there,
Right below Design Comparison where they show the comparison of design to your solution; to the top right of that, there is a "Generate New Screenshot" button which updates the screenshot from the latest update from your provided link to the site. Note that there is a limit of 5 quantities for generating new screenshots which refresh every month for non-premium members. Also, the # of New Screenshots does not stack every consecutive month. Hope that helps. Cheers!
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