Skip to content
OverviewSolutions
14
Comments
8
Mika
@mikatechs

All comments

  • Rohit Rajak•60
    @RoRajakSubmitted about 1 year ago

    Hello Guys,

    Hope you are doing well. I made lots of mistake specially in responsive design so if you able to suggest or improve my coding. It will be helpful

    Thank you in advance

    Results summary component

    3
    Mika•230
    @mikatechsPosted about 1 year ago

    Congratulations on finishing up this project. As I have seen your code, I can give a small recommendations that might help you consider few things.

    1. Avoid using height and width with straight sizes, since with that you are limiting the responsiveness of the elements. Instead try using max-width and min-height.
    2. You should always use relative units like %, EM, and REM are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element's size.

    Good luck and happy coding.

    Marked as helpful
    0
  • Mika•230
    @mikatechsPosted about 1 year ago

    Congratulations on finishing up this project. As I have seen your code, it seems you might have missed the hover effects. There are many ways of creating it, but I can recommend that might help you in getting started. In order to make a hover effect on the main image, try creating overlay element with specific sizes, set it's position to absolute, and set parent container as a relative so it can be positioned perfectly under main image, than set its opacity to 0 until hovered. Also, there are icons missing from your project or not displaying properly. Assests are provided in starter files in images folder. Do not forget to set Jules Wyvern as a link and create hover effect on that also.

    Good luck and happy coding.

    Marked as helpful
    0
  • Mika•230
    @mikatechsPosted about 1 year ago

    Congratulations on finishing up this challenge. As I have seen your code, you might already have thought regarding background image positioned correctly. Instead try setting up positions in percentages to make it fully responsive on specific height: e.g. try background-position: 100% 43%; Also you should always use relative units like %, EM, and REM that are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element's size.

    Good luck and happy coding.

    0
  • Mika•230
    @mikatechsPosted about 1 year ago

    Congrats on finishing up this challenge. As I have seen your code, I have small recommendations you might want to consider.

    1. You have set your body width to 1440px. Please, take in consideration that setting up the body width to the straight size would affect on overall positioning on different sizes of screens. e.g. for larger screens than 1440px your object would not be perfectly centered. Instead, you could use viewport width or percentage. You simply could have centered using flex with justify-content and align-items.
    2. You should always use relative units like %, EM, and REM, that are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element's size.

    Good luck and happy coding. :-)

    Marked as helpful
    0
  • Mika•230
    @mikatechsPosted about 1 year ago

    Congrats finishing up this challenge. Small recommendation you might want to consider.

    1. For centering your object, you should use flex or grid instead of margin: xx auto; try: display: flex; justify-content: center; align-items: center;
    1
  • Mika•230
    @mikatechsPosted about 1 year ago

    Congrats finishing up your first challenge. I have small recommendations that might help you set things up properly.

    1. As I have seen your code, there is no need to use absolute positioning and transform: translate on .container class to center your object, instead try: display: flex, justify-content: center, align-items: center; on your .template container.
    2. You should always use relative units like %, EM, and REM, that are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element's size.

    Good luck and happy coding :)

    0
  • Mika•230
    @mikatechsPosted about 1 year ago

    Congrats on finishing up this challenge. I have small recommendations that might help you.

    1. For the background image, you should use background-size property with percentage values to keep the width and height on different screen sizes. Try background-size: 100% 43%; MDN background-size.
    2. You should always use responsive units like %, EM, and REM, that are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element's size.
    Marked as helpful
    0
  • Blake Lyons•300
    @blakelyonsSubmitted over 1 year ago

    I didn't find anything difficult. This was a first project to get familiar with the submission process on Frontend Mentor.

    QR Component Using HTML/CSS

    1
    Mika•230
    @mikatechsPosted over 1 year ago

    Well done finishing up this challenge. Talking in general, you should be using relative units like "rem" instead of "px" for responsive layout designs.

    0