Modify HTML and CSS to properly size images to reduce Cumulative Layout Shift
Budget: $30 – $100 USD
On several of our current pages we are having an issue with Google Core Web Vitals and their Cumulative Layout Shift. The images are currently set to 99% of the width, which is determined by the size of the device screen. We know ( or rather, think we know ) that we need to set it up so that there are different images, with specific sizes for differnet ranges of device sizes. We can take care of the image sizes, but we are not sure how to modify the code to do this properly.
Some of the pages that have this code are:
http://www.diyshutters.com/interior-shutters.htm
http://www.diyshutters.com/exterior-shutters.htm
http://www.diyshutters.com/board-and-batten-shutters.htm
We have another project posted on here, that is still out for bid. That project is to modify a set of new templates for completely changing our site. This project, for modifying the HTML and CSS ot properly size images, is for more minor work that we can use on our current site. We want to take care of this minor project first, since it will not take us long to make the changes. Then we will move ahead with the larger project of modifying the new templates, since that will also require a lot of time at our end.
Some of the pages that have this code are:
http://www.diyshutters.com/interior-shutters.htm
http://www.diyshutters.com/exterior-shutters.htm
http://www.diyshutters.com/board-and-batten-shutters.htm
We have another project posted on here, that is still out for bid. That project is to modify a set of new templates for completely changing our site. This project, for modifying the HTML and CSS ot properly size images, is for more minor work that we can use on our current site. We want to take care of this minor project first, since it will not take us long to make the changes. Then we will move ahead with the larger project of modifying the new templates, since that will also require a lot of time at our end.