I noticed some of my pages were marked as not mobile friendly with indication that some pages shows the following errors:
- Content is wider than screen
- Clickable elements too close together
- Text too small to read
For a start, I’d like to deal with the Content wider than screen message as I think I have identified the cause of the issue. Woocommerce magnifier keep a full size picture of the product on the page with the following styling:
class="zoomImg" style="position: absolute; top: 0px; left: 0px; opacity: 0; width: 1000px; height: 1000px; border: none; max-width: none; max-height: none;"
We can see that the opacity is set to 0, so the picture is transparent and that the width and height are the picture full size in pixel.
So there is no mystery any longer on what element on the page generate the content wider than screen message.
Now that (at least one of) the culprit has been identified, we need to elaborate a fix. The first strategy that come to mind would be to resize the pic when it is transparent and only switch it to full size when the picture is magnified. This could be done by doing some overwriting of woocommerce files.