Set Left and right Padding to 0

[Eugenio]

Hello how i can set the padding to 0 for left and right?
in this way i can have full width with fancybox when opening iframe..

So i try to use

#fancybox-wrap {

padding: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}

but i doesn’t work… please help me

[RavanH]

Hi Eugenio, are you talking about the space between the light box frame and the edge of the browser window? This is calculated on the fly by the light box script. You can reduce it to 20 pixels but lower than that is prohibited because it will partially hide the close button and (depending on theme CSS) force the site width to surpass browser screen width, adding a horizontal scroll bar.

I’ve put up an example on https://demo.status301.net/ if you click the link Google Maps “embed test” you will see the result.

Changing it through CSS will move the frame out of center position, leaving a larger margin on the right side.

The best approach to fully cover your site, is to set the Margin to its lowest value (20px) and then set the Overlay to have Opacity: 1, and Color: #FFF or another color that matches either the embedded site or your site background color…

[Eugenio]

i’ve put the close button on center using

#fancybox-close {
right:50% !important
}

and solved using:
#fancybox-wrap {
padding: 0 !important;
left:0 !important;
}

but now on desktop is aligned on left… i need fancybox 100% width ONLY on mobile..

[RavanH]

but now on desktop is aligned on left…

Yes, that is what I meant with “Changing it through CSS will move the frame out of center position, leaving a larger margin on the right side.”

What you could do is bypass the 20px minimum limit on your Settings > Media admin page by doing this:
1. Go to Settings > Media and find the field Margin in the Window > Appearance section.
2. Right-click the input field and select “Inspect” (or similar, it depends on your browser)
3. In the developer tool box that now opens (usually on the right side) you will see the part of the page source code that matches this input field. It should look like this:
<input type="number" step="1" min="20" max="80" name="fancybox_margin" id="fancybox_margin" value="0" class="small-text">
4. Change the element attribute min="20" to min="0" by double-clicking it and then manually removing the 2, then hit the Enter key.
5. Now back on the settings page itself, you can lower the Margin to 0
6. Hit the Save Changes button at the bottom.
7. Remove the style rule #fancybox-wrap { padding: 0 !important; left:0 !important; } because that will only confuse the script.

Now you should get a better result…

[Author]

Posts