Skip to content
OverviewSolutions
11
Comments
11
anna
@annab6

All comments

  • Muhammad-Ali-bhatti•40
    @Muhammad-Ali-bhattiSubmitted about 3 years ago

    I have made this design using my knowledge i tried my best i am facing some promblems with responsiveness of the web page inshallah i will do my best

    Vs code

    4
    anna•340
    @annab6Posted about 3 years ago

    Hello! Here are some things that you can improve:

    1. Border-radius on cards
    2. You are using the wrong font family for the paragraphs. It should be font-family: 'Lexend Deca', sans-serif; and font-family: 'Big Shoulders Display', cursive; for the headings
    3. Add text-transform: uppercase; on your headings;
    4. Change text color on buttons according to design
    5. Add more padding on buttons
    6. You can try to add hover effect on buttons button:hover{....} Happy Coding!
    0
  • anna•340
    @annab6Posted about 3 years ago

    A great solution for this challenge! It´s totally responsive and looks identical to the design. Just a small and not important thing - text color on the .order-plan

    Marked as helpful
    0
  • anna•340
    @annab6Posted about 3 years ago

    Hi! Your solution looks great! The only problem - it´s not completely responsive. Layout breaks on 579px and up. You could try to add more breakpoints. Happy coding!

    0
  • anna•340
    @annab6Posted about 3 years ago

    Hi, nice solution! I think you are missing hover effect on questions. Also, on around 1000px and down your layout breaks. You can add more breakpoints. On mobile layout can be good idea to add scroll, as it´s impossible to see all questions when some are opened. overflow-y: auto; Happy coding!

    Marked as helpful
    0
  • anna•340
    @annab6Posted about 3 years ago

    Hi Harry! You can read in this article how to cover the image with css: https://css-tricks.com/tinted-images-multiple-backgrounds/ You can also set up the height of the body to be able to center container vertically: body{ height:100vh; display: flex; justify-content: center; align-items: center; }

    Marked as helpful
    1
  • anna•340
    @annab6Posted about 3 years ago

    Hi! I think you could add image through css, not as an image tag in HTML. That way you could switch between desktop and mobile images for different breakpoints.

    0
  • anna•340
    @annab6Posted about 3 years ago

    Hi Alessandro, I think you need to fix font family on your <p> You could set it up on the body, and then just use Big Shoulders Display for headings. Happy Coding!

    Marked as helpful
    1
  • Prem M•10
    @prem225Submitted over 3 years ago

    This is my first project in frontend mentor. Any feedback would be appreciated.

    Order summary component

    1
    anna•340
    @annab6Posted over 3 years ago

    I think you have some things to fix:

    • include google fonts
    • take out border from the "change" button
    • take out border and background from "cancel order"
    • take out border from "proceed to payment" and center text
    • add a hover effect to buttons
    • and it´s not responsive at all, on 375px everything fails
    0
  • Senay•150
    @Senay-Fekadu2Submitted over 3 years ago

    do you think the mobile version width is too big ? I was wondering and I just went with these tell me if it is not good in respective of UI design principle if I should avoid it for the future

    Mobile first using HTML and CSS

    2
    anna•340
    @annab6Posted over 3 years ago

    Hello! I think you forgot about the hover effect on buttons see this https://developer.mozilla.org/en-US/docs/Web/CSS/:hover smth like this would be: .cta-btn: hover { color .... background-color... border... }

    Marked as helpful
    0
  • Andrii•25
    @andriimeSubmitted over 3 years ago

    I really dont understand how to make websites both for desktop and for phones. Also I had a problem with 'Change'-link: position 'absolute' makes it really strange. But its the best I could make

    Nothing cool, because I didn`t make it right:(

    4
    anna•340
    @annab6Posted over 3 years ago

    Hi! I advise you to see this video of Colt about media queries, it helped me a lot with building a responsive layout https://www.youtube.com/watch?v=na-X_SM8vg0 Happy Coding!

    Marked as helpful
    1
  • anna•340
    @annab6Posted over 3 years ago

    I think you forgot about hover effects on links and buttons. .btazul:hover { background-color: hsl(245, 75%, 75%); }

    Marked as helpful
    1