Lightbox border CSS code is broke, how to fix?
redcrown@mchsi.com
Registered Users Posts: 74 Big grins
I just noticed that images displayed in the Lightbox on my site were "distorted". They were stretched along the long axis.
After quite a bit of head scratching and testing, I discovered it was due to CSS mod I had made when I initially converted to the "new" Smugmug back in August, 2013. The CSS mod was to place a border around Lightbox displays to prevent them from running edge-to-edge in a browser. I'm not a CSS guru, I just copied the code from a forum post.
I'm fairly certain the code worked without distorting by stretching images until recently. Here is the code I used:
.sm-lightbox-image
{
border:45px solid transparent;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background-repeat:no-repeat;
background-position:center center;
background-size:contain!important
}
If I remove the code (or just change the border value to 0), I get no image distortion. But of course I get edge-to-edge displays with the controls on the bottom overlayed on the image. I don't like that. I want my border back. How can I do that?
After quite a bit of head scratching and testing, I discovered it was due to CSS mod I had made when I initially converted to the "new" Smugmug back in August, 2013. The CSS mod was to place a border around Lightbox displays to prevent them from running edge-to-edge in a browser. I'm not a CSS guru, I just copied the code from a forum post.
I'm fairly certain the code worked without distorting by stretching images until recently. Here is the code I used:
.sm-lightbox-image
{
border:45px solid transparent;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background-repeat:no-repeat;
background-position:center center;
background-size:contain!important
}
If I remove the code (or just change the border value to 0), I get no image distortion. But of course I get edge-to-edge displays with the controls on the bottom overlayed on the image. I don't like that. I want my border back. How can I do that?
0
Comments
Have to tried posting or looking for an update in the thread where you originally got that CSS code from?
This would likely be the best starting point.
Thanks -Scott