Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
9
Rajesh Janyani
@Rajesh7rj

All comments

  • Amar Kosare•170
    @amar215
    Submitted over 2 years ago

    Used Flex-box.

    #web-components
    1
    Rajesh Janyani•330
    @Rajesh7rj
    Posted over 2 years ago

    Hello @amar215, Congratulation for your first chellange.

    I have seen your code, one thing I want to tell you is the width and height of card are not appropriate. You should give width in rem (around 18 rem to 20rem). because giving width in % it will change according to screen size because it's depend on screen size. also for heigth you should give 100% height or don't giving height it by default takes space that requires for contain of card with padding. So if you add just width : 18rem and height:100%. It will make your component accurate and responsive also.

    .card { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 5rem auto; padding: 20px; width: 18rem; <==== height: 100%; <==== background-color: hsl(0, 0%, 100%); border-radius: 15px; }

    I hope it will solve your problem, keep coding and keep learning.

    Best Wishes

    Rajesh Janyani

    }

  • leiftocd•60
    @leiftocd
    Submitted over 2 years ago

    product-preview-card-component

    2
    Rajesh Janyani•330
    @Rajesh7rj
    Posted over 2 years ago

    Hello @leiftocd, Great work buddy.

    I want to you give advice about your image border radius. your border-radius is 10 px. But we only have to give border-radius to only top left of the image and bottom left of the image.

    So you can add these two line of code for correction.

    this is your code should be in your style.css 👇 img{ border-radius : 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; }

    or

    img{

    border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

    I wish you the best, hope my feedback will help you. Keep learning buddy...

    Thanks Rajesh Janyai

    Marked as helpful
  • Ignacio Figueroa•250
    @ignaciofigueroadev
    Submitted over 2 years ago

    Profile card component (HTML, SASS, FLEXBOX, BEM)

    #sass/scss#bem
    1
    Rajesh Janyani•330
    @Rajesh7rj
    Posted over 2 years ago

    Hey @ignaciofigueroadev, Great Work Buddy 👏.

    I saw your design it looks great but there are few things we can change and correct them. I think card height seems little big so you can set card height.

    Also in mobile view your card seems same as desktop view, you can change font size and scale up your card dimensions according to mobile-design.jpg file which given in the resources.

    You can use @media-query method for responsive website. You can check this link for that : https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    I hope you can understand this and improve your code. But again it was great attempt for your side.

    Wish you a best of luck! ✌️ Keep Learning.... Keep Coding.....

    Thanks! Rajesh Janyani

  • Vinicius Henrique•590
    @viniciusshenri96
    Submitted about 3 years ago

    Challenge completed with HTML|CSS|FLEX|GRID and responsive

    #accessibility
    3
    Rajesh Janyani•330
    @Rajesh7rj
    Posted about 3 years ago

    @viniciusshenri96 Great work! mate, looking responsive for all devices.

    Great written code of html and responsive.css. Achieve responsiveness for almost all devices (tabs and phones) is commendable. It is great learning for me from your code.

    Keep putting your best work forward. It is helpful for many developers like me.

    Best wishes.... Keep coding.... Keep learning...

    Marked as helpful
  • Chris Andrews•170
    @ChrisAndrewsDev
    Submitted about 3 years ago

    Product Preview Card / Sass

    #sass/scss
    2
    Rajesh Janyani•330
    @Rajesh7rj
    Posted about 3 years ago

    @ChrisAndrewsDev Good effort on first one. Here I wanna help you on you 3 ACCESSIBILITY ISSUES.

    Document should have one main landmark, this encloses the main part of your project, you can fix it like this:

    <div class="homeWrapper"> <-- remove <main class="homeWrapper"> --> add

    All page content should be contained by landmarks, at the end of your code you have a div that can easily be a footer:

    <div class="attribution"> <-- remove <footer class="attribution"> --> add

    I hope this will help you.

    Good wishes......

    keep coding..... keep learning.......

    Marked as helpful
  • Stevan-Dev•660
    @Stv-devl
    Submitted about 3 years ago

    Article-preview-component - Grid, flexbox and toggle

    #sass/scss
    1
    Rajesh Janyani•330
    @Rajesh7rj
    Posted about 3 years ago

    @Stv-devl Nice one mate, Your solution looking very good.

    can you tell how you did that box thing when you click in share icon.

    It will great help if you guide about that and because I'm going to do this challenge very soon.

  • Praise•80
    @Omoh123
    Submitted about 3 years ago

    CSS Grid

    3
    Rajesh Janyani•330
    @Rajesh7rj
    Posted about 3 years ago

    @Omoh123 Hey, Good attempt mate, but i wanna give few suggestions.

    First you should uncomment your font url.

    Second for element <p> , you should you should use font-family: "fraunces", because it is mention in style-me.guide of project.

    You can also use <h1> instead of <p> for text "Gabrielle Essence Eau De Parfum".

    You can also add font-weight -700 for larger font (for boldness of font) for text "Gabrielle Essence Eau De Parfum" and for price.

    Your class ="text" container look more wider, you can set his width equal to class "image-text".

    Hope these things will help you. Over the time you will become better and better.

    Best Wishes.... Keep coding....

    Marked as helpful
  • Ollie•580
    @ohermans1
    Submitted over 3 years ago

    Second project using React

    #bem#react#sass/scss
    2
    Rajesh Janyani•330
    @Rajesh7rj
    Posted about 3 years ago

    @ohermans1 good one, i found your id in solutions section, i've seen your bio, your self taught developer. i'm also learning frond-end my own, it's been 1 month, i want your help to guide me or give any reference (any course, any youtube videos, any books) for my skill improvement. your work as self taught is very good and inspiring, it would be great help if you guide, how long its takes, what is way to learn and which things have to learn for it.

    keep going.... keep coding... best wishes....

    Marked as helpful
  • Gvne•70
    @gvnee
    Submitted about 3 years ago

    product preview card

    1
    Rajesh Janyani•330
    @Rajesh7rj
    Posted about 3 years ago

    @gvnee You did good job.

    You can use "media query (@media only screen and (max-width: 600px or 'any value you want' )" for responsive web design.

    You can also checkout this :- https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    I hope it will help. keep learning buddy.......

    Thanks......

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

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