“Anchor buttons to edges” little fix

Hi again,

When you check the “Anchor buttons to edges” option, you can notice that if you reduce a lot the height of the browser (like 200px height), the image will overlap the anchor buttons.

The same thing happens in a very small width (like 300px width) where the previous and next icons overlaps the image.

It’s kinda easy to fix it with a bit of custom CSS, but it will be better to modify the code directly in my opinion, because you gave us an option to choose a max width/height in the settings tab of your plugin.

To do so, please just add to the max-width and max-height a calc() css function, which is supported by almost every browser, in order to don’t make these elements overlaps.

#everlightbox-slider .slide img, #everlightbox-slider .slide .everlightbox-video-container, #everlightbox-slider .slide .everlightbox-inline-container {
    max-width: calc(90% - 75px); /* left property prev/next button: 25px - prev/next button width: 50px */
    max-height: calc(90% - 75px); /* top bar height = 31px - social bottom bar height = 29px | Total = 60px, then I have choosen 75px, which means an additional 15px for top and bottom margin (7.5px for each) */
}

Additionnally, you can add the same CSS function in order to make the previous and next buttons vertically centered in the image, and not the whole screen :

#everlightbox-prev, #everlightbox-next {
    top: calc(50% - 32.5px);
    position: absolute;
}

All these modifications gives a better display result for small width and/or height. Just give it a try… and modify the generated CSS if you are satisfied with it.

https://css3clickchart.com/#calc

• This topic was modified 8 years, 3 months ago by moxymore.
• This topic was modified 8 years, 3 months ago by moxymore.
• This topic was modified 8 years, 3 months ago by moxymore.