Skip to content
OverviewSolutions
18
Comments
7

Sathya D

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

View more solutions

Latest comments

  • Sathya D•310
    @satzzzzz07

    Hey there, Great work on your first solution! Design looks good. There are few suggestions:

    1. The main card element is not centered in the screen.

    Centering the Element - For Centering the element in the page you can wrap the element in a div and use flexbox more about flexbox.

    1. On the mobile screen size, the buttons or not rendering properly. I can see you mentioning a width of 95% try to center the button by using margin-left and margin-right to auto

    2. The image rendered on mobile screen is very long and you need to use a different image for mobile screen. Check the images folder for mobile-product.png. Also the height of the image needs to be small according to design. You can give a height in the media query for the image to change it for mobile screens.

    Aside these, excellent work again and happy coding :) 👍

    Marked as helpful
  • Sathya D•310
    @satzzzzz07

    Hey there, Great work on your first solution! Design looks good. There are few suggestions:

    1. Mobile-responsive - To create mobile responsive websites you can use the help of media-queries checkout : css media queries

    Few design suggestions (for current project)

    1. Try to not use the border-radius property on the overall container (code div), so it matches the style.

    2. for the credits (Challenge by Frontend Mentor Coded by Anazodo Vanessa) you can add both of your p tags outside of the .code div, so that they are outside of your code div container.

    Aside these, excellent work again and happy coding :) 👍

  • Sathya D•310
    @satzzzzz07

    Hey there, Great work on your first solution! Design looks good. There are few suggestions:

    1. Try to add your background color on the body instead of the section, so your background color is applied on all elements of your page.

    2. for width of the section instead of hardcoding values you can use percentages like width:100% which will make the background color flow through entire width of the screen.

    3. You may try font-weight for increasing the weight on headers.

    Aside these, excellent work again and happy coding :) 👍

    Marked as helpful
  • Sathya D•310
    @satzzzzz07

    Hey there, Great work on your first solution! Design looks good. There are few suggestions:

    1. Try to use the fonts mentioned in the style-guide file. You can import the fonts from google fonts. Its a simple process, choose the font and then import them into your css or html files. You can use the font style using font-family css property.

    2. On mobile-screen, the border-radius of the image is inconsistent. You can add border-radius on top left and right sides instead of existing top-left and bottom-left sides. check out for border-radius

    3. Try to match the font sizes in the design. You can always refer to the design files.

    4. Also the image on the mobile-screen looks a bit messy. You can check out properties like object-fit check here

    Aside these, excellent work again and happy coding :) 👍

    Marked as helpful
  • Sathya D•310
    @satzzzzz07

    Hey there, Great work on your solution! Design looks good. There are few suggestions:

    1. The qr component is not centered in the screen. Centering the Element - For Centering the element in the page you can wrap the element in a div and use flexbox more about flexbox.

    Aside these, excellent work again and happy coding :) 👍

  • Sathya D•310
    @satzzzzz07

    Hey there, Great work on your first solution! Design looks good. There are few suggestions:

    1. Try to use the fonts mentioned in the style-guide file. You can import the fonts from google fonts(https://fonts.google.com/). Its a simple process, choose the font, size and then import them into your css or html files. You can use the font style using font-family css property.

    2. Centering the Element - For Centering the element in the page you can wrap the element in a div. and use flexbox more about flexbox.

    Aside these, excellent work again and happy coding :) 👍

    Marked as helpful
View more comments