January 17, 2022

It’s funny how one simple change to a CSS stylesheet can make or break the effects that you’re after.

Thankfully, I was able to ask the ‘FancyBox’ JS package about a CSS issue I had with my Art Gallery page via this GitHub issue:

• https://github.com/fancyapps/ui/issues/209

They told me that I was applying style changes too broadly to the ‘img’ tag in general.

Therefore, I changed the section for images in the CSS stylesheet for the ‘ArtGalleryCreator2’ project to be the following (Related link: https://github.com/SamuelBanya/ArtGalleryCreator2/blob/main/artgallery.css):

#right_art_gallery img {
    padding: 5px;
    background: white;
    border: 2px solid #BBB;
    margin: 7px 14px 7px 0;
    width: 160px;
}

#right_art_gallery img:hover {
    border: 2px solid red;
}

By specifying the ID of the element itself, it then gets rid of the previous override.

This means that when images are viewed, it doesn’t start at such a small size like the art images BEFORE you click into them.

The result is a better looking Art Gallery page upon clicking into images:

• https://www.sambanya.com/artgallery.html

One problem solved at a time :)

~ Sam