Eliminate Fancybox margins - CSS or Options Documentation?

[stevenrblake]

Hoping for direction on how to control the fancybox window size. I want to be able to make it fullscreen with no safe border/margin but am having a heck of a finding information on the css or option to do so. Sorry if this is basic.

I put a sample on https://jsfiddle.net/yt5d8637/ andhttps://eposterkiosk.com/2024/ectss/fancybox-sample-1.html

When I open it in a full page browser window or click the full screen button it always has a black border/margin around the edge and I cannot find a way to make that border smaller or non existent.

Is there any css or Documentation on the options that I am missing? Is there a more readable version of the Fancybox.css than the unformatted one in the source.zip? I am more of a general IT person so maybe I just need help interpreting the existing directions into a usable code block.

[stevenrblake]

ChatGPT gave me a working answer. I added the following CSS to the Style section of the page. It did not however tell me where I can find documentation for the fancybox.css.

.fancybox__content {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
height: 100% !important;
}

[fancyapps]

There is no need to read the CSS file, use Developer toolbar to easily check the CSS for each element.

The spacing around the content is controlled using padding for each carousel slide. Example:

.fancybox__slide.has-image {
  padding: 0;
}

[stevenrblake]

Thank you. I will examine the developer toolbar to identify any other CSS elements of interest.