css code prevents a 1:1 image from filling the thumbnail box for a folder - SOLVED
AceCo55
Registered Users Posts: 950 Major grins
I have this code to put a white border and drop shadow on my folder thumbnails:
/* stroke and drop shadow for folders */
.sm-user-ui .sm-tiles .sm-tile-content {
border: 2px solid #ffffff;
border-radius:1px;
max-width: 90%;
box-shadow: 10px 12px 6px -4px #000000;
}
It turns out that the "max-width:90%" causes a square image not to fill the thumbnail box
If I change it to 100% (or delete the code) the image fills the thumbnail box ... but the folder thumbnails have no space between them.
I really want to create square custom images for my folder thumbnails ...
Is it possible to create some space between the folder thumbnails and STILL have the border and drop-shadow?
(Alternatively, I can live without the border and drop shadow but I would still like some separation between the thumbnails if that is possible)
thank you very much
acecootephotography.com
www.acecootephotography.com
Comments
SOLVED! For those people that might come across this thread.
In customize > select the "Folders, Galleries & Pages" content block > go to the display tab > then you can change the amount of spacing (mine WAS on "no spacing" but I now have it set to 12px)
I then altered my code from this ...
/* stroke and drop shadow for folders */
.sm-user-ui .sm-tiles .sm-tile-content {
border: 2px solid #ffffff;
border-radius:1px;
max-width: 90%;
box-shadow: 10px 12px 6px -4px #000000;
}
to this ... (the 100% max width was the real solution. The other changes were just fiddling with the shadow)
/* stroke and drop shadow for folders */
.sm-user-ui .sm-tiles .sm-tile-content {
border: 2px solid #ffffff;
border-radius:1px;
max-width: 100%;
box-shadow: 6px 8px 8px 0px #000000;
}
The box shadow parameters are explained here:
https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
So I learned something today and maybe some-one will benefit the solution
www.acecootephotography.com