Increase top and bottom margin FancyBox v2 because of fixed navigation
I'm currently working on a website which in future will be responsive. The
site is primarily made up of images which in turn load into a FancyBox
when clicked. v2 of FancyBox is now responsive and so re-sizes the images
etc when screen size changes. As part of my design I have two fixed
banners which appear at the top and bottom of the page, see image below:
By default there is a margin around the FancyBox so that it's styled
nicely. However, with the fixed positioning that I've added to the banners
I need to increase the top and bottom margin. I've looked through the JS
source but I can't for the life of me find where I should be adding extra
margin. There are all sorts of margins on the transitions etc (which I
think is where I'm getting confused).
In theory I just need to add "x" amount of pixels to the margin, where x
is the height of the banners. As an aside I'm not sure how I would
replicate this in a responsive design, as the banners may be slightly
shallower on a mobile. Adding the margin would mean there's a slight gap
between the image and the banner, where currently the image goes behind
the banner. See the following image for what I'd like it to look like:
I'd appreciate any thoughts/examples of where this has been done before.
Thanks in advance, Adam.
No comments:
Post a Comment