Looked at your project and I suspect what is happening here is a combination of grid and responsive images. The grid is using
fr units and the link block containing the image is using
% units. These are both relative units of measure which means that the browser is not using pixel dimensions when it requests the responsive image variant from the server. Meaning the lowest resolution version is likely being served up to the browser which then looks bad because the image is now displayed in the grid and link block which now have calculated pixel dimensions. Hope that makes some bit of sense.
The solution is to introduce an absolute unit of measurement such as
px so that the browser can request the appropriate image size. Here are two options to try:
- Add a
px dimension to the
min-width property on the link block
- Change grid or link
width properties to
Hopefully the 1st option will work for you because the 2nd option will require more changes to keep the layout responsive.
Also remember to make the adjustments at each breakpoint. Go to the smaller end of each breakpoint and adjust the
min-width as high as possible before it begins to shift the layout.
Hope that helps. Let me know how it goes.