search

p-foundation / pink-app

The repository is created for learning adaptive web design and team collaboration through git and GitHub
https://p-foundation.github.io/pink-app/
0 stars 0 forks source link

fix: fixes display of image for research section for tablet version #36

Closed MarPostovik closed 7 months ago

MarPostovik commented 7 months ago

Description

This pull request resolves #23

Changes Made

In the element research__image of BEM block research changed the media in tag <source> from max-width: 660px to max-width: 1199px

MarPostovik commented 7 months ago

Hey @naumch1k , I think I've found the solution. I've added attribute loading="lazy" both for <img> and <source>. This attribute tells browser, that image should be loaded only when it appears on screen. So, as it never appears on the screens smaller than 660px, it is never loaded on these screens. You can read this article about loading="lazy" if you want.

naumch1k commented 7 months ago

@MarPostovik Wow, what a brilliant idea! 😍 Your solution using the lazy loading technique is elegant and effectively addresses the problem!

I have a small suggestion here. Since lazy loading is applied to the <img> tag, there's no need to duplicate it on the <source> tag. Similar to attributes like alt and class, specifying it once on the <img> tag suffices and automatically applies to the associated <source> tag.

I tested this solution by removing the loading="lazy" attribute from the <source> tag, and it works perfectly across different browsers - Chrome, Safari, and Firefox.

After you've done that, we will all be good to merge 😉

Once again, outstanding job!

MarPostovik commented 7 months ago

Done ✅