Hi all just looking for some help with my homepage.. www.desnoir.com
I have a few things I can't seem to resolve myself which are based mostly on the lightbox composition I have centered on the homepage.
1. If you click anywhere in the browser window the lightbox disappears even though I have 'Hide Target' set to none. It does not reappear unless you refresh the page.
2. When resizing the browser the lightbox disappears completely but when you refresh the page and the new size the lightbox is there. It is as if the action of resizing makes it disappear for some reason. I have breakpoints at 960 and 320 and both of them the lightbox is setup to the appropriate size to fit the screen. The text inside the lightbox is svg outlined text from illustrator, I did this so it would resize smoothly (I had hoped). The images are set to resize: responsive width and height. The resize option for the actual lightbox composition are greyed out.
3. My navigation disappears when the browser width is made quite small and it is not visible on my phone either. But it is visible on my 320 breakpoint.
4. The 320 breakpoint version of my website is not showing up on mobile devices, I have tried on an iphone 7 and a sony xperia. I thought 320 was the minimum to go with for all devices so why would mobiles not be picking this up.
I am guessing I might need another breakpoint between the 320 and 960 but what do you all think before I make the effort.. it seems weird that the lightbox shows up at any size if you refresh the page but the act of resizing the page makes it disappear...
Thanks in advance!
1 your basic problem is you don't understand what a lightbox is but this click anywhere can be ajusted to just click outside the target i.e, lightboxs default to close when someone clicks outside them.
2 the browser resize is normal and so is the resize options grayed out because a lightbox has its own rules... svg images are doable but they take some effort to use on the web and I'd need the file to test
3 your image shows the lightbox is out side the canvas ... phones don't like this anytime and in general they don't like lightboxs but sometimes you can work around that
4 I would assume your design is the issue because your image shows two small breakpoints very near each other so I don't think making more breakpoints will help.
I recommend you rethink the lightbox idea and use a standard com-widget for that design as the lightbox isn't adding anything imo
I also suggest you post a single page of your basic design i.e, Adobe cloud or dropbox with the .muse so people can offer more help
Hi, thanks for your answers..
I do understand what a lightbox is however I am unsure if there is any setting to stop it from ever closing?
The lightbox works and shows up fine on mobiles but the problem is when you resize the desktop browser to be smaller that it disappears but as soon as you refresh the page at the new size it shows up again. It's like something is breaking it in the process of resizing.
I would be totally open to swapping out the lightbox the only purpose for it was that it was the only composition I could find that would align text central both horizontally and vertically. So the text sits exactly in the middle of the browser no matter the browser dimensions. If you know another widget or way to do this I would definitely appreciate the tip.
you could make custom bootstrap div that floats above everything but that would also make the page under it unclickable
on a desktop design you could place a auto-lightbox inside a iframe so people can't reach (and therefore click) outside it
and you could use some kind of cms to load data into a dynamic div that fades out on a timer or goes to another page somehow... perhaps the guys in the dreamweaver forums have some ideas as well?