Little customization to Album full view

angusrs

Hi.

Could you please advise me how to get the images in Album fullscreen view (with "Fit always" option chosen) to show a little smaller (like proportionally 80% smaller or between the top menu and the footer) and always stay/align centered vertically and horizontally on all browsers? Any CSS or PHP modifications I need to do?

I tried applying this CSS rule to the child theme:

#album-view li.nextslide img, #album-view li.prevslide img, #album-view li.activeslide img{
max-height: 80% !important;
width: auto !important;
}

but then the images align in strange ways and change position. On iPad they even look squeezed.

Please help.

Thanks
A

Air

Hello angusrs.

Few users already wanted such feature, so I will have to add it at some point, but it is not easy to make it to be bulletproof for all cases. However instead of manipulating img CSS, try to use main parent CSS

Give a try with this CSS

#whole-bg-image{
    bottom: 10%;
    top: 10%;
}

You can also try to edit left and right properties.

With regards.

angusrs

Thanks. That would be indeed a good feature!

For what it's worth, this is what worked for me

#whole-bg-image img{
    height: 80% !important;
    width: auto !important;
    top: 10% !important;
    bottom: 10% !important;
}

thanks again.

bronco7777

angusrs...you said that this worked for you:

#whole-bg-image img{
height: 80% !important;
width: auto !important;
top: 10% !important;
bottom: 10% !important;
}

Does that mean that your images in full screen slider mode now fit perfectly between menu and footer instead o bleeding of expanding beyond the screen?

If so, how can I do the same? If I copied the lines of code above you speak of....where would I insert or paste them?

Air

angusrs:
Yeah you right, I forgot that images also have position: fixed in here:/
Thanks for sharing!

bronco7777:
Put them in custom CSS plugin like earlier. It wont fit perfectly between header/footer but it might get close to what you want.

With regards.

angusrs

Air:
Sure thing. Anything that makes this theme even better.. I really like it.

bronco7777:
Like Air said, just an even horizontal fit. And I'm using the Child theme provided with it, placing all custom code in the Child's CSS file.

bronco7777

Thanks angusrs, this made a big difference in the look we were going for on the slider pages.

brunovalente

How can we do the same with videos?

Air

Try this

#supersized li iframe {
    height: 80%;
    margin-top: 7%;
}

With regards.

brunovalente

tks

Seospande

Pretty late on this one but if it can help anybody later ... angusrs' solution works, but I added #supersized in the selector, making it : 

#whole-bg-image #supersized img{
height: 80% !important;
width: auto !important;
top: 10% !important;
bottom: 10% !important;
}

This avoids having problems with thumbs in 80% height.
May it help someone someday...
My job here is done

Air

:-)
But you know that since then hypershot got better fit options? Check settings in album.

With regards.