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;
}
