@Anass-Lamiri
Posted
Hi, you did a great job in your challenge, I would like to point out one edit you need to do to refine your solution, which is that when you go below 375px in the mobile viewport you will notice that the card starts touching the edges of the screen, I suggest you add padding in your body element, one more thing is that the width you specified in your container will make you some problems you should delete it, also the background-color will be best put in the body instead of the container because when you go on a smaller screen the container will not cover the entire screen with the bg-color.
EDIT:
After reviewing your code, I observed an aspect that could hinder your design's responsiveness: the fixed width you specified for your image. Even if you implement the previously mentioned suggestions, you might encounter responsiveness issues. I recommend consistently using max-width instead. In your scenario, consider using max-width: 100% and removing the explicitly declared height. This adjustment will enhance the responsiveness of your design.
a recap is:
- add padding to the body element
- width in the container should be removed
- specify max-width for img, and remove height.
I hope you find this feedback helpful.
@Neel-07
Posted
@Anass-Lamiri Hello,
I’m delighted to share that I’ve implemented the changes you suggested. I added padding to the body element, removed the width in the container, and adjusted the image settings by specifying a max-width and removing the height.
In addition to your valuable feedback, I also discovered a few areas for improvement. I’ve made the card responsive by adding a width of 100%, removed the padding from the left and right of the h2 element, and enhanced the visual appeal by adding a box shadow to the card.
I hope these changes enhance the overall user experience and responsiveness of the design. I would be grateful if you could review the updated version and share your thoughts.
Thank you for your time and constructive feedback. It’s been a wonderful learning experience!
@Anass-Lamiri
Posted
@Neel-07 Hi,
I checked your updated version it's responsive and well done, you did a great job, one thing I should mention is that the width of 100% you added to your card doesn't have an effect try removing it and see if anything will change, I know that when we add width of 100% we expect the design responsive but in reality in some cases it have side effects that are hard to debug, what I can advice you to do is only add width of 100% only if you have a valid reason.
I hope you find this feedback helpful.
@Neel-07
Posted
@Anass-Lamiri
Thank you for pointing that out, the width in the card doesn't add any value. Removed the width attribute from the card.
