An ongoing catalogue of Knossos Games website issues and minor updates.
Updated to WordPress 4.1.
Fixed: Mixing large and small puzzle images
Problem: In laying out the website, puzzle images are supposed to be centered horizontally within the column of text. However, if there is an image that is larger than the width of the text column, all of the images would be recentered so that they would be centered with the largest image instead of the text. This was ok if one large image dominated the layout and the other images should accompany it, but was inappropriate if one large image was simply mixed in with a lot of text and other smaller images.
Solution: By creating a separate div class, which relegates these large images to their own blocks, smaller images will center normally.
.content-graphic-big {
display: block;
width: 509px;
}
I still have an HTML5 problem, however, as the standard suggestion for centering images using the following just does not work for my layout, and I’m not completely sure why.
img {
display: block;
margin: 0 auto;
}
Some images are centered using this technique, but most are misaligned left or right. Thus, I am still using the depreciated text-align hack.
.content-graphic {
position: relative;
text-align: center;
}
Here is an example of the original behavior, where all images are centered to the largest image width, which in this case I feel is still appropriate. Here is an example of the new, more appropriate centering of mixed image sizes. This problem was tackled now because it was causing many problems in re-editing the logic puzzle web pages.