Skip to content
OverviewSolutions
10
Comments
22

Curtis Simpson

@crsimpson5Kansas City, KS550 points

Hello 👋 I love the challenge of creating responsive and accessible web pages that work well for everyone. Frontend Mentor has been a great way for me to improve my skills and learn from others.

I’m currently learning...

Accessibility

Latest solutions

View more solutions

Latest comments

  • Curtis Simpson•550
    @crsimpson5

    Hey Rodrigo,

    Great job on this! I love the 3d buttons, and it works great on my phone.

    Regarding mobile development: if you use VSCode and Live Server, you can connect to the server on your phone to see changes immediately. Here's a simple how-to: https://medium.com/@pavankapoor31/how-to-use-vs-code-live-server-local-host-on-mobile-phone-8b38a62117d2

  • Curtis Simpson•550
    @crsimpson5

    Hey Oscar,

    There kinda is a "parent selector" in CSS now. Check out the :has() selector.

    Try something like this:

    .card:has(.card__title:hover) {
    ...
}

    Nice job 👍

  • Curtis Simpson•550
    @crsimpson5

    Hey Kimo,

    Nice job on your solution. It looks great for desktop viewports. I like the button hover effect too.

    The main problem is that it doesn't work for small viewports. With your clamp functions your font size is getting down to 7px -- way too small. Try testing it out on your phone and tablet if you have one.

    Also, you don't need widths on every element. Elements should resize based on their container's width. Here's a resource that may help out: Be The Browser’s Mentor, Not Its Micromanager.

  • Curtis Simpson•550
    @crsimpson5

    Great idea to use clip-path for the background shapes!

    Your solution is spot-on.

    You can try using text-wrap: balance on your h1.

  • Curtis Simpson•550
    @crsimpson5

    Hey Ryan, great job on this! It looks great and I love the dark mode too.

    Here's a couple of things to consider:

    • The background-position properties aren't working in Chrome. You can change them to something like background-position-y: 27%;
    • If you refresh on a page other than home you get a 404. You'll need a Vercel config to make react-router work: https://stackoverflow.com/a/65644138.

    Keep up the good work!

    Marked as helpful
  • Curtis Simpson•550
    @crsimpson5

    Hey Ossy, great job on your solution. The styling looks great and you've matched the design really well.

    A couple things you can improve:

    • The inputs start with a value of "0", so if I select the input and type "2" it becomes "20". You can initialize the state with null to prevent this.
    • The inputs would be better suited for type="number". That way the app doesn't break if a letter is entered. If you want to remove the arrows for a number input here's a link on how to do that: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp.
    • There's some overflow around 630px screen size. One solution would be to allow the flex container to wrap.

    Keep up the good work! 😃

    Marked as helpful
View more comments