Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
29
Comments
13
P

Leonard

@leoikeh99Nigeria1,025 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Link Sharing App using NextJS13, Typescript and styled components

    #next#styled-components#typescript#mongodb

    P
    Leonard•1,025
    Submitted over 1 year ago

    0 comments
  • Dictionary web app (React + Styled Components)

    #accessibility#react#styled-components

    P
    Leonard•1,025
    Submitted almost 2 years ago

    0 comments
  • Newsletter sign-up form with success message using BEM CSS

    #bem

    P
    Leonard•1,025
    Submitted almost 2 years ago

    3 comments
  • Multi-Step Form Using Vite + React

    #react#vite

    P
    Leonard•1,025
    Submitted about 2 years ago

    2 comments
  • Kanban Management using NextJs13 + Prisma + Postgres + OpenAI

    #next#postgres

    P
    Leonard•1,025
    Submitted over 2 years ago

    2 comments
  • News homepage Responsive using Grid and Flexbox


    P
    Leonard•1,025
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • Tochukwu•90
    @kelvtmoney
    Submitted about 2 years ago

    Responsive landing page using media querry

    2
    P
    Leonard•1,025
    @leoikeh99
    Posted about 2 years ago

    Good solution, i have a couple of feedbacks:

    • For the button it better to set only the padding for the top and bottom and then set a width of 100%, i.e.: padding:1rem 0;, this will help with overall responsiveness
    • For the right side where you have the h3 there are couple of ways to make sure the img and the plain text are properly vertically aligned, you could set the h3 to display: flex and align-items: center, this will help with the alignment
    Marked as helpful
  • Nicholas Blanco•150
    @nablanco
    Submitted about 2 years ago

    In-browser markdown editor

    #react#styled-components
    2
    P
    Leonard•1,025
    @leoikeh99
    Posted about 2 years ago

    Very nice solution i have two reeomendations

    1. In your Sidebar, in the list of documents i think its better to set the overflow to auto instead of scroll, this way the scrollbar only shows when it's actually needed.
    2. Maybe remove your console logs.

    P.S: I really like the responsiveness.

    Marked as helpful
  • Abbas Roholamin•30
    @abbas-roholamin
    Submitted almost 3 years ago

    Design product preview card component using css flexbox and grid

    4
    P
    Leonard•1,025
    @leoikeh99
    Posted almost 3 years ago

    Very good solution, my only feedback is:

    1. Try to already make the component responsive before reaching 425px, as it is right now the image seems to reduce in width a little too much before you applied your responsive styles.

    2. I would also advice, at a point when the screen is a small sizes to just set the components with to a certain percentage e.g. 90%, this will greatly improve responsiveness.

  • Evan•10
    @CodeSofty
    Submitted almost 3 years ago

    Product Preview Card

    #sass/scss
    1
    P
    Leonard•1,025
    @leoikeh99
    Posted almost 3 years ago

    A nice attempt, i have a couple of corrections:

    1. You shouldn't set the card to a width of 50% rather to an actual value e.g. 600px

    2. As for flexbox i think you used it well but the image and the right part (the content), should both take 50% of the card you can do this by easily setting the width of both the image and the right part (the content) to 50%

    3. It will also be very helpful to set the content parts border-box to box-sizing i.e. box-sizing:border-box in your css

    lastly i'll leave a resource link to a youtube step by step solution to this problem: Product Card Component (Explained) - Frontend Mentor #1

    Marked as helpful
  • Eslam•60
    @Eslam-EO
    Submitted almost 3 years ago

    Responsive product preview card using css grid, flex-box, media query

    1
    P
    Leonard•1,025
    @leoikeh99
    Posted almost 3 years ago

    Good solution, but i have a few corrections:

    1. I think is just better to set the buttons width to 100%, since you have already set the width and padding for the container.

    2. I think will also be better to set the width of the container to something like 90% when the screen reduces to a certain width, this will enable better responsiveness.

    3. For the button, i don't think you should set the border-radius to 5%, rather is should be something like 8px.

    4. Lastly you should reduce the line height of you <h2> a bit.

    Marked as helpful
  • Jerry•170
    @jerry-dev
    Submitted almost 3 years ago

    CSS Flexbox, CSS Grid, WAI-ARIA, JavaScript, Semantic HTML

    #accessibility
    1
    P
    Leonard•1,025
    @leoikeh99
    Posted almost 3 years ago

    I would advice setting the height of the sidebar to 100vh and not 100%, so that users do not have to scroll down to see the bottom of the sidebar.

    Marked as helpful
View more comments
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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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

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