css code prevents a 1:1 image from filling the thumbnail box for a folder - SOLVED

AceCo55AceCo55 Aussie GrinnerRegistered Users Posts: 945 Major grins
edited July 9, 2021 in SmugMug Customization

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

My opinion does not necessarily make it true. What you do with my opinion is entirely up to you.
www.acecootephotography.com

Comments

  • AceCo55AceCo55 Aussie Grinner Registered Users Posts: 945 Major grins

    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

    My opinion does not necessarily make it true. What you do with my opinion is entirely up to you.
    www.acecootephotography.com
Sign In or Register to comment.