CSS Leave a comment

Text won't stay with image slider when page is resized

Issue

I’ve got a pure CSS image slider and a block of text plus footer etc. underneath it. When the page is resized, the image slider resizes neatly and everything underneath it resizes, but the image slider pulls away from the block of text and everything while the block of text and everything else stays put. I’ve tried messing with the positioning of both the image slider and the section but everything ends up breaking the image slider or causing overlap. What am I doing wrong/how can I get this to work so that when the browser resizes and the slider gets smaller, the block of text and everything else beneath it stays stuck to the bottom of the slider and the whole page shrinks vertically to match how the slider shrinks vertically when resized? Please ignore any funny-looking buttons/links or whatever as I’m only including the code that is for the image slider and the rest of the text so as not to clutter up my included fiddle with code that doesn’t need fixing. I know not to include static URLS inside the page but images won’t load in the fiddle if I don’t specify their exact locations.

If you want to see the test page running live, it’s at Rack Inspections test page.

:root {
    --ORANGE: #FA6114;
    --BLUE: #0000FF;
    --GREY: #787878;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    max-width: 100vw;
}

body {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    color: var(--GREY);
}

.orange {
    color: var(--ORANGE);
}

.blue {
    color: var(--BLUE);
}

.grey {
    color: var(--GREY);
}

.wrapper {
    flex: 1 0 auto;
}

header {
    margin: 0 auto;
    height: 150px;
    position: relative;
    max-width: 100vw;
}

nav {
    max-width: 100vw;
    vertical-align: bottom;
    outline: none;
    position: relative;
    list-style-type: none;
    font-size: 22px;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    margin-right: 30px;
    cursor: pointer;
    text-align: center;
    float: right;
    top: 15px;
}

nav a, nav a:link, nav a:visited, nav a:hover {
    outline: none;
    text-decoration: none;
    color: var(--GREY);
}

nav a:active {
    color: var(--ORANGE);
}

nav a:hover {
    color: var(--BLUE);
}

ul#nav li {
    display: inline-block;
    padding: 0 19px;
}

section {
    max-width: 100vw;
    background: WHITE;
    font-size: 13px;
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    position: relative;
    cursor: default;
}

.SecTitle {
    font-size: 40px;
    margin-bottom: 15px;
}

.LinkCurrent {
    color: var(--ORANGE);
    cursor: default;
}

.logo {  
    position: relative;
    top: 15px;
    left: 30px;
    max-width: 100vw;
    height: auto;
}

article {
    position: relative;
    font-size: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 5%;
    margin-right: 5%;

}

.services {
    font-size: 20px;
    text-align: center;
    display: block;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
}

.PHSRLink {
    display: inline-block;
    margin: 0 25px 0 25px;
}

.inspectionsLink {
    display: inline-block;
    margin: 0 25px 0 25px;
    vertical-align: top;
}

.PHSRTitle {
    font-family: Century Gothic, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 40px;
    font-weight: bold;
}

footer {
    flex-shrink: 0;
    display: block;
    float: right;
    position: relative;
    color: var(--GREY);
    font-family: Century Gothic, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    text-align: right;
    padding: 100px 20px 20px 0;
}

footer a:link {
    color: var(--ORANGE);
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

footer a:visited {
    color: var(--ORANGE);
    text-decoration: underline;
}

footer a:hover {
    color: var(--BLUE);
    text-decoration: underline;
}

/* Image Slider */
#slider {
    max-width: 100vw;
    width: 952px;
    height: 409px;
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

#slider > div {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    animation: slide 20s infinite;
    opacity: 0;
}

#slider > div:nth-child(2) {
    animation-delay: 5s;
}

#slider > div:nth-child(3) {
    animation-delay: 10s;
}

#slider > div:nth-child(4) {
    animation-delay: 15s;
}

#slider > div:nth-child(5) {
    animation-delay: 20s;
}

@keyframes slide {
    10% {
        opacity: 1;
        }
    20% {
        opacity: 1;
        }
    30% {
        opacity: 1;
        }
    40% {
        opacity: 0;
        }
}
        <div id="wrapper">
            <header>
                <img class="logo" src="http://www.cafenocturne.com/RackInspections/images/logo.png" alt="Rack Inspections - Click to return to main page">
            <nav>
                    <ul id="nav">
                        <li class="LinkCurrent">HOME</li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="contact.html">CONTACT US</a></li>
                    </ul>
            </nav>
            </header>

            <section>
                <div id="slider">
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide1.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide2.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide3.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide4.png')"></div>
                </div>

                <article>
                    Rack Inspections process gives our clients a greater understanding of rack storage systems, best practices and safety awareness to ensure that your company is in compliance with all safety regulations. In addition, we provide straight forward racking inspections with detailed recommendations.<br>
                </article>

                <div class="services">
                    <div class="PHSRLink">
                        <div class="SecTitle orange">PHSR</div>
                        <img width="268" height="133" alt="Pre-Start Health and Safety Review image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-1-GUY.png"><br><br>
                        PHSR (Pre-Start Health &amp; Safety Review)?<br>
                        We can help.<br><br>
                        <a href="PHSR.html" class="button" title="Click here to read more about PHSR">READ MORE</a><br><br>
                    </div>

                    <div class="inspectionsLink">
                        <div class="SecTitle orange">Inspections</div>
                        <img width="268" height="133" alt="Inspections image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-2-Wrench.png"><br><br>
                        Rack inspections identify safety concerns<br>
                        and deficiencies with rack storage systems.<br><br>
                        <a href="inspections.html" class="button" title="Read more about our inspection process">READ MORE</a>
                    </div>
                </div>
            </section>

            <footer>
                <a href="mailto:[email protected]" title="Click here to send us an email."><span class="orange">info<span class="blue">@rackinspections</span>.ca</span></a><br>
                Copyright <script>document.write(new Date().getFullYear())</script><br>
                All Rights Reserved.<br>
                <span style="font-size: 10px;">Designed by RackInspections.ca</span>
            </footer>
        </div>

Solution

When using background-size and specifically contain, the replaced content is scaled as large as possible maintaining its aspect ratio while fitting within the element’s content box. Because of this, a situation called letterboxing occurs, and this is a perfect example of that. The #slider has an initial height of 409px and although that "fits" nicely for larger viewports, for smaller viewports the images in the slider aren’t occupying 100% of the 409px explicit height causing a bunch of whitespace between the images and the <article> text.

If you instead use background-size: cover on the #slider > div elements then the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. Now the text will always live right underneath the image slider for all viewport widths. To make the #slider height more responsive (ie not always 409px), you could swap the absolute unit value with a relative length unit like vh so its height is dynamically calculated by the browser.

:root {
    --ORANGE: #FA6114;
    --BLUE: #0000FF;
    --GREY: #787878;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    max-width: 100vw;
}

body {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    color: var(--GREY);
}

.orange {
    color: var(--ORANGE);
}

.blue {
    color: var(--BLUE);
}

.grey {
    color: var(--GREY);
}

.wrapper {
    flex: 1 0 auto;
}

header {
    margin: 0 auto;
    height: 150px;
    position: relative;
    max-width: 100vw;
}

nav {
    max-width: 100vw;
    vertical-align: bottom;
    outline: none;
    position: relative;
    list-style-type: none;
    font-size: 22px;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    margin-right: 30px;
    cursor: pointer;
    text-align: center;
    float: right;
    top: 15px;
}

nav a, nav a:link, nav a:visited, nav a:hover {
    outline: none;
    text-decoration: none;
    color: var(--GREY);
}

nav a:active {
    color: var(--ORANGE);
}

nav a:hover {
    color: var(--BLUE);
}

ul#nav li {
    display: inline-block;
    padding: 0 19px;
}

section {
    max-width: 100vw;
    background: WHITE;
    font-size: 13px;
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    position: relative;
    cursor: default;
}

.SecTitle {
    font-size: 40px;
    margin-bottom: 15px;
}

.LinkCurrent {
    color: var(--ORANGE);
    cursor: default;
}

.logo {  
    position: relative;
    top: 15px;
    left: 30px;
    max-width: 100vw;
    height: auto;
}

article {
    position: relative;
    font-size: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 5%;
    margin-right: 5%;

}

.services {
    font-size: 20px;
    text-align: center;
    display: block;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
}

.PHSRLink {
    display: inline-block;
    margin: 0 25px 0 25px;
}

.inspectionsLink {
    display: inline-block;
    margin: 0 25px 0 25px;
    vertical-align: top;
}

.PHSRTitle {
    font-family: Century Gothic, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 40px;
    font-weight: bold;
}

footer {
    flex-shrink: 0;
    display: block;
    float: right;
    position: relative;
    color: var(--GREY);
    font-family: Century Gothic, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    text-align: right;
    padding: 100px 20px 20px 0;
}

footer a:link {
    color: var(--ORANGE);
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

footer a:visited {
    color: var(--ORANGE);
    text-decoration: underline;
}

footer a:hover {
    color: var(--BLUE);
    text-decoration: underline;
}

/* Image Slider */
#slider {
    --h: 60;
    max-width: 100vw;
    width: 952px;
    height: 45vh; /* Vary this */
    height: calc(var(--h) * 1vmin); /* responsive unit */
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

#slider > div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    animation: slide 20s infinite;
    opacity: 0;
}

#slider > div:nth-child(2) {
    animation-delay: 5s;
}

#slider > div:nth-child(3) {
    animation-delay: 10s;
}

#slider > div:nth-child(4) {
    animation-delay: 15s;
}

#slider > div:nth-child(5) {
    animation-delay: 20s;
}

@keyframes slide {
    10% {
        opacity: 1;
        }
    20% {
        opacity: 1;
        }
    30% {
        opacity: 1;
        }
    40% {
        opacity: 0;
        }
}
<div id="wrapper">
            <header>
                <img class="logo" src="http://www.cafenocturne.com/RackInspections/images/logo.png" alt="Rack Inspections - Click to return to main page">
            <nav>
                    <ul id="nav">
                        <li class="LinkCurrent">HOME</li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="contact.html">CONTACT US</a></li>
                    </ul>
            </nav>
            </header>

            <section>
                <div id="slider">
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide1.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide2.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide3.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide4.png')"></div>
                </div>

                <article>
                    Rack Inspections process gives our clients a greater understanding of rack storage systems, best practices and safety awareness to ensure that your company is in compliance with all safety regulations. In addition, we provide straight forward racking inspections with detailed recommendations.<br>
                </article>

                <div class="services">
                    <div class="PHSRLink">
                        <div class="SecTitle orange">PHSR</div>
                        <img width="268" height="133" alt="Pre-Start Health and Safety Review image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-1-GUY.png"><br><br>
                        PHSR (Pre-Start Health &amp; Safety Review)?<br>
                        We can help.<br><br>
                        <a href="PHSR.html" class="button" title="Click here to read more about PHSR">READ MORE</a><br><br>
                    </div>

                    <div class="inspectionsLink">
                        <div class="SecTitle orange">Inspections</div>
                        <img width="268" height="133" alt="Inspections image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-2-Wrench.png"><br><br>
                        Rack inspections identify safety concerns<br>
                        and deficiencies with rack storage systems.<br><br>
                        <a href="inspections.html" class="button" title="Read more about our inspection process">READ MORE</a>
                    </div>
                </div>
            </section>

            <footer>
                <a href="mailto:[email protected]" title="Click here to send us an email."><span class="orange">info<span class="blue">@rackinspections</span>.ca</span></a><br>
                Copyright <script>document.write(new Date().getFullYear())</script><br>
                All Rights Reserved.<br>
                <span style="font-size: 10px;">Designed by RackInspections.ca</span>
            </footer>
        </div>

Answered By – Tanner Dolby

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published