fancybox position

Hi @maringorama,

Thank you for reaching out to us!
I am not sure I understand where you’d like the lightbox to be. Can you please explain a bit more?
If you remove the code above it looks/works as it should.

Warmly,
Mihaela

hi mihaela,

i would want it to be max. 1024px wide and 800px high.
i want it to be exactly OVER my actual website which is 1024px wide
in the middle of the page, vertically and horizontally.

??

as soon as i change the max-width, it is ALL OVER the page, huge, getting too big ??

thank you !

Hi.

My Lightbox is floating left. although I do not have anything telling it to do so. I would like it to be exactly above the page below .. but uh .. I get it all wrong. custom CSS:

body .modula-fancybox-container {
text-align: center !important;
max-width: 1024px !important;
max-height: 950px !important;
top: 250px;
margin: auto !important;
z-index: 999999998;
}

any idea ?

Hi @maringorama

Thank you for explaining!
Can you please remove all the CSS added so I can take a look and send you a new one?

Warmly,
Mihaela

Hi Mihaela, thank you. all custom CSS is removed now ??

Hi @maringorama,

Please try this code:

body .modula-fancybox-slide--image .modula-fancybox-content {
    max-width: 1024px !important;
    width: 100% !important;
    height: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate( -50%, -50% ) !important;
}
body .modula-fancybox-slide--image .modula-fancybox-content .modula-fancybox-image {
    position: relative;
    top: auto;
    left: auto;
}

Warmly,
Mihaela

Hi Michaela, wow thank you this almost did it for me ??

Only had to change 1 thing:
body .modula-fancybox-slide–image .modula-fancybox-content .modula-fancybox-image { position: relative;
top: auto;
left: -7px; <<—— (the fancy box page has no scroll-bar, so it was too much right)
}

But still, one thing is missing. I would like THE CONTAINER to be only 1024px wide. to also have the picture count, the X for closing it and the < and > “inside” my page.. Do you know what I mean ?

thank you so much so far !! hope we find a solution.. best, Alexandra

Hi @maringorama,

Can you please remove the code I first sent and add this one:

body .modula-fancybox-container {
    max-width: 1024px !important;
    width: 100% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate( -50%, -50% ) !important;
}

Warmly,
Mihaela

Hi, thank you @mplusb !

this ALMOST gets it right. i still need to get it 7px further left. See here : https://www.jottacloud.com/s/1174b87f9ed3a484c44bed1636e298a711e
(on the left you see your older code + the little bit that I had added before which is not working any more grrr.)

any idea ?

Hi @maringorama,

Sorry for the late reply – missed your response.
Can you please re-add the code so I can investigate again?

Thank you!
Mihaela

Dear Mihaela (@mplusb), the code I used for the screenshot is on the screenshot.
The code I use now, which is OK working on computer (but not on phones or pads – too much left on them), is this one:

body .modula-fancybox-slide–image .modula-fancybox-content {
max-width: 1024px !important;
width: 100% !important;
height: auto !important;
top: 50% !important;
left: 50% !important;
transform: translate( -50%, -50% ) !important;
}

body .modula-fancybox-slide–image .modula-fancybox-content .modula-fancybox-image {
position: relative;
top: auto;
left: -7.5px;
}