Instructions indicate thumbnails are 350px wide but they are actually 344px wide

[mjskay]

The instructions suggest uploading an image that will look best on a retina display at 350 pixels wide, but the images are actually displayed at a width of 344 pixels:

This appears to be because the div containing the image is 350 pixels wide, but has a 3 pixel padding.

Unless I am mistaken on the mapping of web-pixel-size to retina-pixel-size, taking the instructions as given one would assume you should upload a 700 pixel wide image (twice the stated resolution to be optimal for a retina display), but should probably instead use a 644 pixel wide image given the current layout.

Could either the instructions or the CSS be adjusted so that they match?

[Emaasit]

@mjskay Thanks for this observation. Please create a pull request to address this and I'll merge it :-)

[mjskay]

Happy to. What solution do you prefer?

1. Leave the layout as-is, but change the instructions to ask for images that work best for retina at 344x294 (i.e., some multiple of this size >= 2 will yield best results, such as 688x588).

2. Remove the 3px padding from the layout (images would go right to the inner edge of the boxes, but box sizes would stay as-is).

3. Increase the box width and height by 6px to compensate for the padding.

4. Something else?

[Emaasit]

I think option 2 would suffice.

[yutannihilation]

@mjskay
I think I've fixed the padding. Could you confirm if this is the proper fix when you have a chance? I'm not an expert of CSS...