Frontend Mentor | Matheus Quintanilha's profile

Latest solutions

Responsive Blog preview card

Submitted 5 months ago

I would like feedback on the performance optimization of my landing page. Specifically, I'm looking for suggestions on how to better optimize images and CSS to improve loading times, especially for mobile devices.

Additionally, I'm interested in getting feedback on the hover animations for the card. While they work well, I’m curious if there are any ways to make them more efficient or if there are better alternatives to achieve a similar effect with CSS or JavaScript.

Lastly, I would appreciate advice on improving accessibility for users with visual impairments, particularly regarding color contrast and focus states.

1 comment

Responsive QR Code Challenge

Matheus Quintanilha•30

Submitted 5 months ago

Challenges and Solutions

1. Responsive Design

Challenge: Ensuring the layout looked good on both mobile and tablet screens was initially challenging, especially with fixed dimensions in the original design.
Solution: I used media queries to adjust the layout for different screen sizes. For mobile devices, I switched to relative units like percentages for widths and padding, which made the design more flexible. For tablets, I increased font sizes and adjusted container widths to better utilize the available space.

2. Text Alignment and Line Breaks

Challenge: The text wasn't breaking correctly on smaller screens, and the alignment didn't match the design in some cases.
Solution: I used <br> tags to control line breaks in the HTML and adjusted the line-height and text-align properties in the CSS to ensure the text was properly aligned and readable on all devices.

3. Maintaining Code Consistency

Challenge: Adding responsiveness without altering the original code structure was tricky, as I wanted to keep the code clean and maintainable.
Solution: I kept the original CSS intact and added media queries at the end of the file. This approach allowed me to introduce responsiveness without disrupting the existing styles.

4. Testing Across Devices

Challenge: Testing the design on multiple devices and screen sizes to ensure consistency was time-consuming.
Solution: I used browser developer tools (like Chrome DevTools) to simulate different screen sizes and made adjustments based on the results. This helped me quickly identify and fix issues without needing physical devices.

5. Performance Optimization

Challenge: I was concerned about the performance of the QR code image on slower networks or devices.
Solution: Although I didn't implement it in this project, I researched using responsive images with srcset to serve optimized images based on the device's screen size and resolution. This is something I plan to implement in future projects.

2 comments