Using css media-queries to change content based on screen size.

What are you most proud of, and what would you do differently next time?

I'm most proud of how the responsive design turned out, especially the use of CSS media queries to switch images dynamically for different screen sizes. This helped maintain a clean and structured layout across devices.

Next time, I would explore using CSS Grid instead of Flexbox to manage the layout, which might offer even more flexibility. I’d also consider adding CSS transitions to make hover effects smoother and enhance the user experience.

What challenges did you encounter, and how did you overcome them?

One challenge was ensuring that the image swapped correctly on smaller screens using content: url(). Initially, the mobile image didn’t load properly, but I resolved this by making sure the file paths were correct and using media queries effectively.

Another issue was managing text wrapping and spacing in the mobile view. Some elements felt cramped, so I adjusted padding and font sizes dynamically to improve readability.

By testing across different devices and tweaking the styles, I ensured the design looked great at all breakpoints.

What specific areas of your project would you like help with?

Responsive Design:

Are there better ways to manage image swapping for different screen sizes? Should I use picture elements instead of content: url() for better support? Accessibility & Usability:

Are there any ARIA attributes I should add to improve accessibility? Should I make the card’s buttons and links more distinguishable for better user interaction? Code Optimization:

Are there any CSS best practices I might have missed? Would using CSS variables help make styles more scalable and maintainable?

I appreciate any feedback that can help me improve my approach! 🚀