Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Create a Fullscreen Slider with CSS

Hayley Adhofer
Hayley Adhofer
3,451 Points
Posted by Hayley Adhofer
Hayley Adhofer
3,451 Points

Full size slider dimensions out of whack

I am attempting the Fullscreen Slider with CSS to make a slider to go inside of a wrapper div that has already been created on the website I am working with. Similar to the tutorial "making a website" The slider is filling the space width wise but will not expand to the correct height. If I take away the wrapper dive which is the base my website is built on the slider works fine but not within the wrapper which is 940px (w) x 100% (h). Does anybody have a suggestion on how I can make the css slider work within my div?

Brent Suggs
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points
Brent Suggs
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points

Do you have a code snippet for us to look at? You might look at your padding on the wrapper div and also check for collapsing vertical margins.

1 Answer

Hayley Adhofer
Hayley Adhofer
3,451 Points
Hayley Adhofer
Hayley Adhofer
3,451 Points

This is the main page styles

html {
    height: 100%;
}

body {
    background-image: url('img/symphony.png');
    background-color: #f1f1f1;
    color: #434343;
    font-family: 'Raleway', sans-serif;
    height: 100%;
} 

a {
    text-decoration: none;
    color: #434343;
}

#wrapper {
    max-width: 940px;
    min-height: 100%;
    margin: 0 auto;
    padding: 5% 5%;
    background-color: #fff;
    box-shadow: 0px  0px 20px 2px rgba(153,153,153,.7);
    position: bottom;
}

And here is the code for the slider.

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrap {
    height:100%;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-color: #120103;
    color: #fff;
    text-align: center;
}

header {
    background: : #3E474F;
    box-shadow: 0 .5em #111; 
    position: absolute
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;

}

header label {
    color: #788188;
    cursor: pointer;
    display: inline-block;
    line-height: 4.25em;
    font-size: .667em;
    font-weight: 800;
    padding: 0 1em;
}

header label:hover {
    background: #f35e04;
}

.slide {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    padding: 8em 1em 0;
    background-color: #120103;
    background-position: 50% 50%;
    background-size: 100%;
    background-size: cover; 
}

.slide-one {background-image: url('img/Dotty.jpg');}

.slide-two {background-image: url('img/GG.jpg');}

.slide-three {background-image: url('img/leilani.jpg');}

.slide-four {background-image: url('img/Libby.jpg');}

[id^="slide"]:checked + .slide {
    left: 0;
    z-index: 100;
}