Replicated it pretty accurately!
What challenges did you encounter, and how did you overcome them?Making it responsive was pretty challenging!
What specific areas of your project would you like help with?Once the viewport width is less than the default card width for a certain degree, the card starts to overflow on the left side. How do I solve this problem?
nice work! 😊 but what do you mean by this "Once the viewport width is less than the default card width for a certain degree". Especially the to a certain degree
I am proud that I was able to build the highly closest design in comparison to the required design. From next time, I would try to complete the project in a significant lesser amount of time without compromising on the quality of the project.
What challenges did you encounter, and how did you overcome them?Essentially, I encountered following challenges:-
1.Responsive paragraph.
2.Designing the plan portion.
3.Box-Shadow for the payment button.
4.Designing the background of the card.
I tackled these problems calmly by researching out various possible solutions, choosing the better solution, applying the solution, modifying it and then finalizing it. I used following approaches for respective problems:-
1.Padding helped out in the problem of making the paragraph responsive as per the given design across different devices.
2.Flexbox and `` element were highly useful, in designing the plan portion.
3.Setting up the box-shadow CSS property with proper values, helped in giving the payment button a bottom box-shadow.
4.Pseudo element ::before and position: fixed; were significantly helpful in designing the background.
Would love to know following:-
1.What better approach could be used for designing the background?
2.Any suggestions in general or specifically regarding code optimizations, better approaches and production worthy practices.
Checkout my solution ! Feedbacks are welcome ! Stay Happy & Well ! Happy Coding ! Thanks 😀
understanding the fundamental logic of flexbox, grid and positioning can go a long way. Also good work 😁
I am really new to HTML and CSS. Does anyone have any recommended best practices I should follow?
Is there a better way to make text responsive to screen size? The card dimensions in my solution do not quite match the design image for mobile version.
Try and change the h1 into a p tag, you can embed it with an anchor tag(<a>)
I'd like feedback on what I should tweak in order to provide a better UX.
There's a vertical scroll on the component when it gets too small. I set display to none to keep the UI intact, however I don't think it's immediately apparent that it's scrollable.
Is there a way to communicate that information without diverting from the design?
Try adding an alt text to name IMG and footer to the last div(not div itself) to fix error and maintain accessibility
Why not change the last div to footer to maintain accessibility
Please i will need feedback on the responsiveness of the page. i will also need feedback on my code in general: is my code clean enough? did i employ on the the best solutions?
Still having trouble with form validation. Furthermore, still figuring out how to make more than one Leaflet.js maps appear on the same page.
Check your accessibility and your mobile display very well and see if it needs fixing.
I'm really pleased with this one. I had fun and games with the image again, with getting borders to round and working out how to get the tint on it.
My first time trying media queries as well. I got it all to work nicely in the end, but am not sure it's the cleanest of code.
Any feedback and tips are most welcome.
Thanks,
The IMG is so compressed put it to a responsive state
I'm really pleased with this one. I had fun and games with the image again, with getting borders to round and working out how to get the tint on it.
My first time trying media queries as well. I got it all to work nicely in the end, but am not sure it's the cleanest of code.
Any feedback and tips are most welcome.
Thanks,
Hello,
I made this little project using GRID, feel free to leave your feedback! I tried to make it responsive. If anyone knows good tutorials or reading materials for @media it would be appreciated.
Happy coding, ** Raitis :) **
