Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
21
Comments
5
BBualdo
@BBualdo

All comments

  • Valery•90
    @Koptelkin
    Submitted over 1 year ago

    Country-search app via React&Typescript

    #react#react-router#redux#typescript#styled-components
    1
    BBualdo•540
    @BBualdo
    Posted over 1 year ago

    Nice design!

    I've found only 2 issues in your project:

    1. In Languages you have object Object instead of languages.
    2. Some countries does not have their flags displayed correctly when you go to the detail view.

    I will let you opportunity to solve this on your own, but if you have some issues, I will be pleased to help you!

    Marked as helpful
  • Ayush Kanyal•120
    @ayushkanyal
    Submitted over 1 year ago

    Interactive-Ratings-Component

    1
    BBualdo•540
    @BBualdo
    Posted over 1 year ago

    Hello, the design looks very nice, good job!

    I think the logic of your app is not perfect, because it should let you pick one of 5 ratings and then show the result. At this moment you can pick all ratings and additionally - you can't "unclick" clicked rating. Just write a function that checks if any rating is currently selected and if it is - remove selection and add to currently clicked one. Another approach (which I preffered) was removing selection from all rating elements and adding one to clicked. Good luck!

    Marked as helpful
  • WonteDev•20
    @Promise-Wonte
    Submitted almost 2 years ago

    first mobile-solution using CSS flexbox.

    #accessibility#web-components
    2
    BBualdo•540
    @BBualdo
    Posted almost 2 years ago

    Hi, if you want to set different styles on different screen size you have to use media queries.

    To do this you can wrap all your styles in:

    @media (max-width: 400px) {
    ***your styles***
    }
    

    It means that all of your styling will be applied until page width crosses 400px.

    So you can copy all your styles twice. One for @media (max-width: 400px) {} and one for @media (min-width: 401px) {} and then just style it for desktop. In that the changes won't be applied for Mobile View.

    And about responsiveness I have one advice: Avoid hard height and width settings of the elements unless you really have to do it. Pages are responsive by default. But if you have to do it temporarly, use max-width or min-width instead of width. Same rule for height. And try to set it with vw and vh instead of px.

    vw is ViewportWidth (100vw means it will always have width equal to page width). vh is ViewportHeight (100vh means it will always have height equal to page height).

    Good luck!

    Marked as helpful
  • Przemyslaw Pracz•280
    @rayofhope50
    Submitted almost 2 years ago

    FAQ Accordion Card

    1
    BBualdo•540
    @BBualdo
    Posted almost 2 years ago

    Elegancko to wygląda!

  • BBualdo•540
    @BBualdo
    Submitted almost 2 years ago

    Mobile First Technique #2

    3
    BBualdo•540
    @BBualdo
    Posted almost 2 years ago

    And again, setting up width still looks weird here.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub