Konstantin
@khoncharovAll comments
- @Curiositz@khoncharov
Hi. I can suggest for the main pic instead of using <img> with srcset to use <picture> with <source><img>. It will help properly load cropped picture for mobile screen width immediately on page resizing. Example:
<picture> <source srcset="./img/image-web-3-mobile.webp" media="(max-width: 960px)"> <img src="./img/image-web-3-desktop.webp" alt="Wooden colored puzzle." width="730" height="300"> </picture>
More details on MDN
- @JonathanP4@khoncharov
I guess the range thumb problem is a cross-browser compatibility issue. Open your solution in Firefox browser and you'll see same result. Probably
::-moz-range-thumb
can help solve the problem for Firefox at least.