Title: fancybox position Last modified: May 15, 2020 --- # fancybox position * Resolved [maringorama](https://wordpress.org/support/users/maringorama/) * (@maringorama) * [6 years ago](https://wordpress.org/support/topic/fancybox-position/) * hi. * i would like the fancy box to be exactly above the main field. i try in vain. * i use the following custom CSS: .fancybox-container { position: fixed !important; width: 1024px !important; height: 800px !important; margin-top: 100px; margin- left: auto; overflow: hidden; z-index: 999999998; } * i am sure i got it all mixed up with the position etc. * thank you ! * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffancybox-position%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 11 replies - 1 through 11 (of 11 total) * [Miha](https://wordpress.org/support/users/mplusb/) * (@mplusb) * [6 years ago](https://wordpress.org/support/topic/fancybox-position/#post-12839612) * Hi [@maringorama](https://wordpress.org/support/users/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 * Thread Starter [maringorama](https://wordpress.org/support/users/maringorama/) * (@maringorama) * [6 years ago](https://wordpress.org/support/topic/fancybox-position/#post-12840524) * 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 ! * Thread Starter [maringorama](https://wordpress.org/support/users/maringorama/) * (@maringorama) * [6 years ago](https://wordpress.org/support/topic/fancybox-position/#post-12867339) * 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 ? * [Miha](https://wordpress.org/support/users/mplusb/) * (@mplusb) * [6 years ago](https://wordpress.org/support/topic/fancybox-position/#post-12870270) * Hi [@maringorama](https://wordpress.org/support/users/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 * Thread Starter [maringorama](https://wordpress.org/support/users/maringorama/) * (@maringorama) * [6 years ago](https://wordpress.org/support/topic/fancybox-position/#post-12870373) * Hi Mihaela, thank you. all custom CSS is removed now 🙂 * [Miha](https://wordpress.org/support/users/mplusb/) * (@mplusb) * [6 years ago](https://wordpress.org/support/topic/fancybox-position/#post-12875504) * Hi [@maringorama](https://wordpress.org/support/users/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 * Thread Starter [maringorama](https://wordpress.org/support/users/maringorama/) * (@maringorama) * [6 years ago](https://wordpress.org/support/topic/fancybox-position/#post-12875581) * 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 * [Miha](https://wordpress.org/support/users/mplusb/) * (@mplusb) * [5 years, 12 months ago](https://wordpress.org/support/topic/fancybox-position/#post-12927186) * Hi [@maringorama](https://wordpress.org/support/users/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 * Thread Starter [maringorama](https://wordpress.org/support/users/maringorama/) * (@maringorama) * [5 years, 12 months ago](https://wordpress.org/support/topic/fancybox-position/#post-12927348) * Hi, thank you [@mplusb](https://wordpress.org/support/users/mplusb/) ! * this ALMOST gets it right. i still need to get it 7px further left. See here : [https://www.jottacloud.com/s/1174b87f9ed3a484c44bed1636e298a711e](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 ? * [Miha](https://wordpress.org/support/users/mplusb/) * (@mplusb) * [5 years, 11 months ago](https://wordpress.org/support/topic/fancybox-position/#post-12998394) * Hi [@maringorama](https://wordpress.org/support/users/maringorama/), * Sorry for the late reply – missed your response. Can you please re-add the code so I can investigate again? * Thank you! Mihaela * Thread Starter [maringorama](https://wordpress.org/support/users/maringorama/) * (@maringorama) * [5 years, 11 months ago](https://wordpress.org/support/topic/fancybox-position/#post-12998488) * 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; } Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘fancybox position’ is closed to new replies. * ![](https://ps.w.org/fancybox-for-wordpress/assets/icon-256x256.jpg?rev=1864321) * [FancyBox for WordPress](https://wordpress.org/plugins/fancybox-for-wordpress/) * [Frequently Asked Questions](https://wordpress.org/plugins/fancybox-for-wordpress/#faq) * [Support Threads](https://wordpress.org/support/plugin/fancybox-for-wordpress/) * [Active Topics](https://wordpress.org/support/plugin/fancybox-for-wordpress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/fancybox-for-wordpress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/fancybox-for-wordpress/reviews/) * 11 replies * 2 participants * Last reply from: [maringorama](https://wordpress.org/support/users/maringorama/) * Last activity: [5 years, 11 months ago](https://wordpress.org/support/topic/fancybox-position/#post-12998488) * Status: resolved