All solutions

Is there a way to make flex container fill completely as much as possible by reordering flex items depending on their width?

We have flex wrap on flex container. So flex items wrap.

Example: there are four flex items. First two items fit perfectly in the first row. Third item is large so it cant fit in the remaining space in the first row so it goes to next row. Fourth item is small and could fit in the first row but flex doesnt alter flex items order so first row remaining space is empty (no stretch).

Is there a way to tell flex to re order fourth item to fill the first row completely?

Also I have suggestion for you matt. I see there are free tags on projects now so I am assuming there will be paid ones as well. I think another way you can make this more worthwhile is to provide paid code review service. I also hope you add really advance projects as well to practice with react etc.

I used triangle and pentagon images as background. But had to reduce its size for mobile devices. So I used backgroundSize: 250px 250px.

The problem was unexpected as it thinned the triangle and pentagon lines. Can you explain why? How do I avoid lines being thinned?

I used radio buttons for accordion and feature tabs and checkbox for mobile nav menu . Should I use javascript instead in production websites instead of these css hacks?

I used picture tag for display curved images for three sections. Is it bad to use html element for such images?

How to scale up or down a fixed width background image like bg-curve image in this challenge while keeping its shape as original as possible?

Using position:cover alters the shape hence image curves dont display as original in width more than 375px for mobile and for desktop more than 1440px.

I used JS setCustomValidity to disable tool tip for invalid form. Is there any pure css method too?