Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Reponsive interactive pricing component

#bootstrap#jquery
Aayush Juyalā€¢ 290

@aj12-houdini

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was an extremely difficult challenge for me. It took me a really long time to design the slider and make the page responsive. I was wondering how do you guys approach the problem of making a page responsive. What are the major areas do I need to consider when making a page responsive. Also, do I have to focus on every little detail while making the page responsive, for example, do I keep the same font-size on both a large screen and a small screen or do I reduce the font-size on the small screen to create more space.

Community feedback

Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

Hey aj12-houdini, good job with this challenge. Keep up the good work

Your solution looks great, I just that the card needs to be scaled a little. You can achieve this using the css property transform: scale().

In terms of accessibility

  • Form elements must have labels
  • Heading levels must increase by one

In terms of your validation errors

  • <div> is not allowed as a child of <label>

I hope this helps

Cheers, Happy coding šŸ‘

0
Larryā€¢ 190

@ljcutts

Posted

Hey Aayush, well done! This is a nice solution. In terms of responsive, you must mean making the frontend compatible for different devices like the desktop or the phone. Not sure if you did this, but most people work on the mobile-version first and then work on the desktop version. Usually what helps with making different versions of the app is constraining the size of the divs and containers with css properties like "max-width" and "min-width". In terms of the font-size, I think it depends on how the design looks, but usually I'm pretty sure the font-size is going to change depending on the version of the app. This is also the case with changing the css properties with html elements in general to fit the app design.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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