Websites York - Template46

Design Notes

The trick to get the social icons to be the link colour in Site Styles is to add <g fill='currentColor'> before the path in the SVG code. I got my icons from the Fontawsome 5 > SVG tab so I had to add this code before the path in each icon.

Trying to get display='flex' to work I discovered by chance that the container containing the social icons needed to be set to 'simple container'.

The background colour of the button on hover needs to have force set to work for me.

This includes the object-fit swatch and swatches for the height and width of the picture stack. Also the equalizer swatch on the two columns in the card. In my case have set the width of the picture stack to be 256 rather than 192. I have done this to try and reduce the amount of white space I see on the right of the card, just after the breakpoint to medium happens as you reduce the screen width.

This version is better than my first attempt as it gets rid of the white gap that appears below the image for certain screen sizes between about 640 and 850 pixels.

I had to remove some padding I had on the x-axis from the block grid as this was causing the final social icon to be truncated.