Skip to content
OverviewSolutions
18
Comments
7
Sathya D
@satzzzzz07

All comments

  • Sathya D•310
    @satzzzzz07Posted about 2 years ago

    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
    1
  • RavanCod•250
    @vanessie2424Submitted about 2 years ago

    I'm still having problem with getting it to fit the mobile view. Someone should please help out. Than you.

    QR code component

    2
    Sathya D•310
    @satzzzzz07Posted about 2 years ago

    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 :) 👍

    0
  • Sathya D•310
    @satzzzzz07Posted about 2 years ago

    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
    0
  • Sathya D•310
    @satzzzzz07Posted about 2 years ago

    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
    0
  • Sathya D•310
    @satzzzzz07Posted about 2 years ago

    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 :) 👍

    2
  • Isaac Vono•40
    @ZzzackkSubmitted about 2 years ago

    Well, this is my first project and I had some difficulties during it but I think it is because I tought too much about simple things and made them way harder or complex than they should be, overall I think it looks decent. If you have any tips or feedback about the project I would love to hear them so that I can continue practicing and doing other projects. 👍

    QR Code Component using simple CSS

    4
    Sathya D•310
    @satzzzzz07Posted about 2 years ago

    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
    0
  • Sathya D•310
    @satzzzzz07Posted over 2 years ago

    Congrats on your first project. Image and the white background not getting rendered while in the desktop. You can change the media query px value. (like min-value: 600px) to render big screens. You can initially work on mobile screens and then add media queries to match the big screens. Also Try implementing the mobile version of the design.

    All the best 👍

    0