Rohit Rajak• 60
@RoRajak
Submitted
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
Mika
@mikatechs
All comments
- Mika• 230
@mikatechs
Posted
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.
- 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.
- 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 - ahmed elsayed• 90
@ahmed9143
Submitted
this simple card made using html css please give me your feedback to improve myself and thanks
Mika• 230@mikatechs
Posted
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 - SRI RAKESH V• 590
@srirakeshv
Submitted
Mika• 230@mikatechs
Posted
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 - Eduardo Martins• 10
@edu221g
Submitted
Mika• 230@mikatechs
Posted
Congrats on finishing up this challenge. As I have seen your code, I have small recommendations you might want to consider.
- 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.
- 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 @jmiguelqv
Submitted
Mika• 230@mikatechs
Posted
Congrats finishing up this challenge. Small recommendation you might want to consider.
- 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- For centering your object, you should use flex or grid instead of margin: xx auto; try:
@AdithyaKothamasu
Submitted
Mika• 230@mikatechs
Posted
Congrats finishing up your first challenge. I have small recommendations that might help you set things up properly.
- 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. - 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- 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:
- Mellymatic624• 20
@Mellymatic624
Submitted
This is a revised solution with the background image and color fixed
Mika• 230@mikatechs
Posted
Congrats on finishing up this challenge. I have small recommendations that might help you.
- For the background image, you should use
background-sizeproperty with percentage values to keep the width and height on different screen sizes. Trybackground-size: 100% 43%;MDN background-size. - 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 - For the background image, you should use
- PBlake Lyons• 300
@blakelyons
Submitted
I didn't find anything difficult. This was a first project to get familiar with the submission process on Frontend Mentor.
Mika• 230@mikatechs
Posted
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
