Make dive (in wrapper div) width as screenwidth.

[Kristov]

Hey,

This homepage has pictures in a div.
http://lauratolleneer.be/

The div that holds the pictures is in the wrapper-div that gives the width of all content a +- 80% of the screen… (change on width screen = responsive).

Now I want to change the width of the pictures: become as width as the browser screen. BUT the div should stay in the wrapper div…

Is this possible? Make a div/picture come out of his wrapper div?
Responsive solution please ;-)

Thanks in advance!
Wondering if this possible with just changing some lines in CSS only :-)

Kristof

[bearhead]

Here is a simple method to do it:
http://codepen.io/kvana/pen/rLqWoZ

There was actually a post a few days ago with other methods:
https://css-tricks.com/full-width-containers-limited-width-parents/

[Kristov]

Hi,

Thanks for your reply BearHead!!!

But what if my wrapper div is 960px on a desktop…

And only in percentage on smaller screens (90% done width media query).

Kristof

[bearhead]

You would just use different margins for the 960px-wide parent case. The article I linked to shows a method for that:

.fullwidth {
margin-left: calc(-100vw / 2 + 960px / 2);
margin-right: calc(-100vw / 2 + 960px / 2);
}

You might also have to add
html { overflow-x: hidden }

to work around a bug in how view units are calculated when a scroll bar is involved.

[Author]

Posts