Skip to content
OverviewSolutions
15
Comments
9

Rajesh Janyani

@Rajesh7rjVadodara, Gujarat, India330 points

Web developer in making

I’m currently learning...

React JS

Latest solutions

View more solutions

Latest comments

  • Rajesh Janyani•330
    @Rajesh7rj

    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

    }

  • Rajesh Janyani•330
    @Rajesh7rj

    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
  • Rajesh Janyani•330
    @Rajesh7rj

    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

  • Rajesh Janyani•330
    @Rajesh7rj

    @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
  • Rajesh Janyani•330
    @Rajesh7rj

    @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
  • Rajesh Janyani•330
    @Rajesh7rj

    @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.

View more comments