[Plugin: WP Supersized] How to adjust padding so image doesn't go under header

my workaround was to add white space (or another color to match your site background if a solid color) to the top and bottom of the slide (image), roughly equivalent to the height of your header and footer. works fine for me.

does anyone else have a solution? what judyhicks suggested doesn’t quite work..

Correct, adding white space to the image doesn’t work, since the image will starch and scale depending on viewport size.

Modifying the core JS does work but it’s obviously a pain and would get undo by a plugin update.

I have the same issue. Guess one needs to work with margin-top in percentage, to keep it responsive. However, I too can’t yet find the right css to apply here to both wrapper and each image.

CSS alone won’t work. Anything you do in CSS will happen after the image has already been resized and hence will stretch/squish the image hence why you’ve GOT to do it in JS.

There is a good discussion of it in the comments of the JS library this plugin uses: https://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/

search for the word “offset” and modify according your needs. Maybe someday someone will update the JS library to take a top/right/bottom/left offset or padding value… currently it doesn’t.

For example for my site I subtracted 75 here:
// Gather browser size
var browserwidth = base.$el.width(),
browserheight = (base.$el.height()-75),
offset;

and elsewhere added 75 to center:
// Vertically Center
if (base.options.vertical_center){
$(this).css(‘top’, ((browserheight – $(this).height())/2)+75);
}

You could then save this modfied script in your theme, deregister the script that the plugin uses and register your own in it’s place (I haven’t gotten to that part yet, but that’s the best way I can think of to handle it all).

@jon Brown

I just wanted to say THANK YOU. I have torn out enough hair trying to solve this problem!!!!

hi, it is working with only css, i made this just in an actual project (not online for now). But it is only working to resize the whole images, so if you make 10% for the header the “li”s have to be 90% or less!
this is the code i used so far (written in style.css)

#supersized{
height: 70% !important;
width: 50% !important;
display: inline-block !important;
}
#supersized li{
top: 87px !important;
width: 100%;
}
#supersized li a{
height: 70% !important;
margin: 0 auto !important;
text-align: center !important;
}

okay something is not working well: the iPad version. so add:
#supersized{
overflow: visible !important;
}

to the supersized id and it’s also playing well on iPad/iPhone

i know, it’s all a dirty hack but working fine for me like this and the client!