I made a responsive page in all of google devices with media queries
What challenges did you encounter, and how did you overcome them?learning about and using them was very challenging
What specific areas of your project would you like help with?Learning more about making more responsive designs, this was my first and it was very difficult
The only thing I had to look up for this was how to adjust the width of anchor tag elements. That does highlight that I am lacking some fundamental information such as the default display property for various common element types, but that's information that easily comes with time.
What challenges did you encounter, and how did you overcome them?I initially opted for a mixing of flexbox and grid layouts to layout the elements and in doing so I was surprised that elements weren't centering like I expected them to. I did end up getting this working, but I ultimately decided to just use margins to space out elements.
What specific areas of your project would you like help with?I'm still not sure how of the best way to approach defining the widths for these kinds of cards. A view like this should be highly reactive as much of its base width is just padded out space for the sake of it. However, I am statically setting the width of the component and using min-width in child elements which prevents reactivity.
Fantastic
I have considered the width of the card to be 380 pixels in my project. Additionally, I have set a breakpoint where I changed the width of the card. I hope this helps.
@media (width < 420px) { body{ padding: 0 1rem; } .card{ max-width: 100%; } }
I'm proud to have completed this challenge and, above all, to have kept looking for solutions until I finally achieved what I wanted to provide.
This chalmlenge made me learn and progress and I'm sure I'll begin the next one with more confidence.
What challenges did you encounter, and how did you overcome them?I had trouble with the image's responsiveness. I wanted the height to be fixed but the sides to be responsive without distorting the image.
I finally managed to find a solution with OBJECT-FIT, which allowed me to crop the image in a fluid way.
What specific areas of your project would you like help with?As I've only recently started to learn programming on the web on my own, I'd love to get feedback and advice from more experienced people to help me progress more quickly.
Great! In my opinion, it would be even better if you also add hover effects.
