Skip to content
OverviewSolutions
7
Comments
15
Durga Jaiswal
@Durga-Jaiswal

All comments

  • Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Hello, Good to see your Project. To make the card center aligned with the body, you can follow these as

    display: flex
justify-content: center
align-items: center

    This will make your card component center aligned.

    3
  • AdamsRuth1•20
    @AdamsRuth1Submitted about 1 year ago

    I'm not so sure of my code responsiveness and i am really finding it difficult setting my code to adjust to various screen sizes

    i used HTML,CSS

    3
    Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Great. You have to make body tag viewport height 100vh.

    body {
max-height: 100vh;
}

    To avoid scrolling, there should be max-height not min-height. This will make sure that no - scroll bar appear in the main page.

    0
  • Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Hello there, Good to see your project.

    You can set min-height of the card so that it matches with the given design. Other than this your project doesn't have much to change.

    Hope you find it helpful.

    0
  • Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Hello there, Good to see your project. Overall your project is good, but the width: 80%; in the .container selector should be 60% or 65% so that it matches with the given Style of Challenge.

    Hope you find this helpful.

    Marked as helpful
    0
  • LexLexLex•40
    @LLLEEXXSubmitted about 1 year ago

    Making a responsive website is still challenging for me, but I would greatly appreciate any suggestions on what I can do.

    Rating Design

    1
    Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Overall your project is Good. But as I've seen in the code you've used CSS ID as selectors, this is not a good practise. Try to use classes as selectors, using classes as selectors is known as best practise.

    Marked as helpful
    0
  • AnjasFedo•40
    @AnjasfedoSubmitted about 1 year ago

    The project I'm working on is an interesting challenge, but I feel like there are some things I want to learn more about and some aspects that still confuse me. The main obstacle I encountered while building this project was still learning how to use CSS properly, especially in the context of front end development. I find it sometimes difficult to achieve the look I want and apply CSS efficiently. I feel I need to learn more. Do you have any suggestions or resources that can help me understand good CSS usage?

    QR Code React Sass

    2
    Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Try to use border-radius in pixels(px) as using % does not make border perfect circular around the corners. I've also learnt this after a long time. Using px in border-radius helps in this problem.

    Talking about CSS resources, there are plenty of them.Youtube Videos and Free Courses, but to get better grasp on it, you have to make small and easy projects, that will get you in better position of learning CSS.

    Marked as helpful
    1
  • Mjornog•40
    @MjornogSubmitted about 1 year ago

    My first difficulty in this challenge was in the process of deducing the sizes of the elements on the screen and I “wasted” a lot of time with that, so I'd like to know some tips on how I can make this design process a little faster.

    My first solution using CSS

    2
    Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Put max-height : 100vh to avoid scrolling the page. It will help in making page do not scroll. Other than this all things are perfect.

    Marked as helpful
    0
  • Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Use color gradient as prescribed in style guide for the Your Result side of card, so that it matches with the original layout.

    1
  • Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Happy, You've completed the challenge. There are many resources out there, I'll list 2 of them:

    1. CSS Grid by wesbos

    2. CSS Grid by Scrimba

    1
  • JalenDmarion25•460
    @JalenDmarion25Submitted about 1 year ago

    Another challenge that I enjoyed, probably gonna try and at least do 1 or 2 of these a day for the next few days, once again any advice on what can be done is greatly appreciated.

    3-column preview card component

    1
    Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Try to use prescribed font-family given in the style guide. body text should have different font-family than head text. Overall the project is good. You have done excellent job

    Marked as helpful
    0
  • Corey•20
    @acoreyuSubmitted about 1 year ago

    Fun project. I was not sure if the mobile design was supposed to be a different set of code or if the one set of code was supposed to resize to look like the mobile version. Any tips and feedback are much appreciated.

    QR code component

    2
    Durga Jaiswal•230
    @Durga-JaiswalPosted about 1 year ago

    Overall project was Good

    In img tag padding: 20px should be 10px so that it matches with the given design.

    and there should be some padding in header-text and guide-text classes.

    I hope it helps you.

    Marked as helpful
    0
  • Durga Jaiswal•230
    @Durga-JaiswalPosted over 1 year ago

    Set background-image as radial-gradient for the Your Result side component. It's not a simple background color, it is the combination of two colors given in the style-guide in the given package of files. Like this:

    background-image: radial-gradient(circle, hsl(252, 100%, 67%),hsl(241, 81%, 54%) 80%); This will make the background look same like the given project.

    1