CODEWITHSUNDEEP
javascripthtmlcss
Mike
Mike

Reputation: 31

100% width light-box with scroll

I tried to get this to work by adjusting several CSS properties - wax width / height/ etc - but to no avail.

What I would like to do is to have a lightbox open up to 100% WIDTH of the window. You would then scroll down to see the lower portion of the lightbox portrait image content.

Currently my lightbox I am sing just opens to either the full light or width of the page, but is constrained and tries to keep the image fully within the view-able window.

This is what I am trying to achieve: Light-box mockup

This is the script I'm using: http://www.designflowstudio.com/lightbox/index2.html

Thank you.

Upvotes: 0

Views: 979

Answers (4)

Mike
Mike

Reputation: 31

This is exactly what I am after :) http://codepen.io/dimsemenov/pen/kIorE

I will keep playing around with it.

Upvotes: 0

Edward G-Jones
Edward G-Jones

Reputation: 585

The previous answers seem like they should work for the grayed box area, you could try body having 0 padding; 'body {padding : 0}'. The body or other divs may be pushing your grayed area off the edge of your view screen, probably via padding.

However to retain the original parameters of the image, perhaps try making it 'display : fixed' and 'width/height auto'. Bear in mind that the 'lightbox 2' script might be auto sizing your images as part of its functionality.

Upvotes: 0

Samp
Samp

Reputation: 385

Try: 

.background
{
width:100%;
min-width:960px; /* The width of the content */
background:url(your-pretty-background.png);
}

.content
{
width:960px;
}

I may be understanding your question wrong but what you also may need to do is set:

{
display: inline-block;
}

It will respect top & bottom margins and padding; respect height and width.

Upvotes: 1

CRABOLO
CRABOLO

Reputation: 8793

try

min-width: 100% !important;

also, make sure you're not setting a height anywhere for that image.

Upvotes: 0

Related Questions