Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Single Price Grid Solution

@Saurabh-Mishra04

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello !

It's not pixel perfect but I hope to achieve it soon.

If you notice any errors do mention them in the comment section. Any suggestions on how to improve my code will be appreciated.

Community feedback

@AngelusLovell

Posted

@xstrafez you did not use the min and max media queries the right way. Which resulted in your design breaking, below 300px.

Personally, I do not use them together in the same queries.

1

@Saurabh-Mishra04

Posted

Hey @ShashaGazem! Thanks for the feedback but I already knew that. I didn't want the design to be responsive below 320-325px.

If you don't mind can you share with me how you would use the queries. (By the way was this comment for me or @xstrafez cuz you mentioned him.)

Thank You!

0
P
Patrick 14,265

@palgramming

Posted

@ShashaGazem and if you design mobile first then you are only assigning media queries in one direction anyway

0

@AngelusLovell

Posted

@Saurabh-Mishra04 I use media queries defining my design in one direction, mobile-first in my case. Using min and max together is never wrong, but I simply felt writing in such a way would lead me to confusion when I later try to make a change to the code.

And I feel like designing in one direction is structurally consistent. If that makes any sense.

I will be honest I simply wanted to post my first comment, and felt using min and max together is a little dangerous, so without actually confirming i simply pointed it. 😅

0
P
Patrick 14,265

@palgramming

Posted

Overall nice start to this challenge

in mobile view you have a border turning on that you were most likely using for your layout around the text "Full access for less than $1 a day"

0

@Saurabh-Mishra04

Posted

Thanks for letting me know. I have fixed the issue. Hope there are no other errors.

Thank You!!

0
P
Patrick 14,265

@palgramming

Posted

@Saurabh-Mishra04 well if you wanted to add a hover state to your button that would improve and help to complete the challenge

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