div size and overflow

Question

I've been working on a singlepage site with full width but I just can't get it to work as I want to.

What I need is to figure out how to make each section containing

full width
background image full width
height of the div should be at least the same as the image, but if the text overflows then height changes
text I can place as I like (with margin/top)

At the moment the site looks alright, just not for cellphones due to the text http://www.teknologitalenter.dk

.row {
    margin: 5px 0px;
}

    .row:first-of-type {
        margin-top: 0px;
    }

    .row:last-of-type {
        margin-bottom: 0px;
    }

    .row > div > div {
        position: absolute;
    }

    .row .padding-0 {
        padding: 0px;
    }


.row > div > div h1 {
    font-size: 1em;
    font-size: 10px;
    font-weight: bold;
}

.row > div > div p, .row > div > div ul li  {
    font-size: 0.7em;
    font-weight: normal;
}

/* Small devices (tablets, 450px and up) */
@media (min-width:450px) {
    .row > div > div h1 {
        font-size: 1em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li{
        font-size: 0.7em;
        font-weight: normal;
    }
    blockquote footer {
        font-size: 0.5em;
    }
}
/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
    .row > div > div h1 {
        font-size: 1em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li {
        font-size: 0.9em;
        font-weight: normal;
    }
    blockquote footer {
        font-size: 0.7em;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .row > div > div h1 {
        font-size: 1.6em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li {
        font-size: 1.2em;
        font-weight: normal;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .row > div > div h1 {
        font-size: 2em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li {
        font-size: 1.4em;
        font-weight: normal;
    }
}

/* extra small devices (phones, 450px and down) */
@media (max-width:450px) {
    .row#intro > div > div {
        bottom: 10%;
        left: 10%;
    }

    .row#om > div > div {
        bottom: 3%;
        left: 10%;
        width: 70%;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 4px;
    }

    .row > div div p {
        font-size: 0.5em;
    }
}

/* Small devices (tablets, 450px and up) */
@media (min-width:450px) {
    .row#intro > div > div {
        bottom: 5%;
        left: 5%;
    }

    .row#om > div > div {
        bottom: 5%;
        left: 5%;
        width: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 4px;
    }
}
/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .row#intro > div > div {
        bottom: 10%;
        left: 10%;
    }

    .row#om > div > div {
        bottom: 10%;
        left: 10%;
        width: 50%;
        background-color: transparent;
        padding: 0px;
        color: black;
    }
}

<div id="intro" class="row">
        <div class="col-sm-12 padding-0">
            <img class="img img-responsive" src="http://teknologitalenter.dk/img/villiam.jpg" />
            <div>
                <h1>
                    Header
                </h1>
                <p>Sub header.</p>
            </div>
        </div>
    </div>
<div class="row" id="om">
        <div class="col-sm-12 padding-0">
            <img class="img img-responsive" src="http://teknologitalenter.dk/img/oculus.jpg" />
            <div>
                <p>
                    Section text
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis pulvinar nisi sed sagittis. Donec ultricies id leo a ultricies. Praesent nunc ex, commodo vel vestibulum mollis, pretium vel purus. Donec suscipit nulla est, interdum varius risus sollicitudin vel. Cras tortor neque, vehicula non massa in, iaculis scelerisque ipsum. Cras vel dignissim lorem. Morbi pellentesque orci nec nulla vehicula, ac condimentum lectus scelerisque. Sed dolor arcu, condimentum sagittis nisi quis, mollis convallis nunc. Mauris mollis, lacus non interdum faucibus, ligula leo faucibus mauris, nec sodales lectus nulla sit amet mauris. Sed non viverra lectus. Maecenas at fringilla felis.

In iaculis tellus eu felis placerat, et aliquet augue rutrum. Praesent lectus diam, blandit sed vehicula at, venenatis quis lorem. Nunc auctor pretium odio, ac rutrum diam ullamcorper ut. Proin vitae ornare magna. In sapien risus, dapibus id sagittis at, gravida et leo. Fusce lectus neque, mattis eget magna non, iaculis laoreet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel dapibus lacus, ut efficitur ligula. Nunc vel justo condimentum, ullamcorper erat ut, sollicitudin ante. Sed nec ornare sapien. Praesent non neque quam. Aenean eget justo sodales, vehicula ex sit amet, cursus nisl. Integer suscipit massa commodo, accumsan dolor eget, condimentum dolor.

Cras ut dolor sed purus elementum ornare. Fusce posuere suscipit nulla, sed efficitur mauris pellentesque eget. Mauris molestie pulvinar sapien tempor vehicula. Pellentesque volutpat laoreet arcu sit amet iaculis. Pellentesque semper, mi vitae placerat tincidunt, arcu nulla maximus dui, viverra ultrices sapien nibh in lectus. Etiam scelerisque elit erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel maximus ipsum, a vehicula enim. Phasellus eu velit quis arcu dapibus posuere.

Phasellus arcu felis, tristique ac cursus non, iaculis nec sem. Nullam fermentum ligula vel nisi condimentum maximus. Donec pulvinar auctor est. Sed justo diam, dignissim quis bibendum vel, pharetra in lectus. Morbi molestie dolor eu posuere tempus. Curabitur maximus sem sit amet semper dignissim. Cras vehicula, purus sed volutpat molestie, ex purus ultrices dolor, eu suscipit sem dolor ac ante. Aliquam elementum arcu ac lacus faucibus iaculis. Sed faucibus arcu sed nisi ultricies commodo. Donec erat diam, aliquet vitae lacus quis, tincidunt pellentesque purus. Ut vulputate lectus leo. Duis varius dapibus orci. Etiam semper est ac semper aliquam. Ut sollicitudin, tortor sed imperdiet pharetra, nisi leo faucibus turpis, pretium euismod urna felis quis leo. Aenean hendrerit ante quis euismod porttitor. Integer interdum ex vitae lacus suscipit consequat.

Aliquam venenatis nibh non nisi ullamcorper, at molestie ipsum consectetur. Nulla tempor felis eu tellus molestie, eget pretium dolor vehicula. Morbi ultricies elit leo, sagittis malesuada risus feugiat vel. Curabitur pretium, enim non finibus malesuada, neque velit suscipit tellus, non varius nunc ante vitae nisi. Sed pulvinar, neque non dignissim tincidunt, velit purus suscipit nibh, ac finibus sapien tortor quis turpis. Proin at justo vel nulla finibus fringilla vel id augue. Nulla in erat auctor, rutrum quam vitae, faucibus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ornare turpis.
                </p>
            </div>
        </div>
    </div>

I hope someones out there who got an idea to what i can do. I know its possible since i've done this loads of times before, I've just forgot how

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website doesn't work can I just paste a link. — Paulie_D
– Paulie_D, Commented Jan 23, 2017 at 12:08
@Paulie_D just added snippet, how ever it dose not seam to work as intended here — Mathias
– Mathias, Commented Jan 23, 2017 at 12:24

Yonas Hailu · Accepted Answer · 2017-01-23 12:49:22Z

I have made a change on the css for row and text containing div. If i got your question correct.

.row {
    margin: 5px 0px;
}

    .row:first-of-type {
        margin-top: 0px;
    }

    .row:last-of-type {
        margin-bottom: 0px;
    }

    .row > div > div {
        position: absolute;
        top: 80px; 
        display: block;
        bottom: initial !important;
    }

    .row .padding-0 {
        padding: 0px;
        position: relative;
    }


.row > div > div h1 {
    font-size: 1em;
    font-size: 10px;
    font-weight: bold;
}

.row > div > div p, .row > div > div ul li  {
    font-size: 0.7em;
    font-weight: normal;
}

/* Small devices (tablets, 450px and up) */
@media (min-width:450px) {
    .row > div > div h1 {
        font-size: 1em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li{
        font-size: 0.7em;
        font-weight: normal;
    }
    blockquote footer {
        font-size: 0.5em;
    }
}
/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
    .row > div > div h1 {
        font-size: 1em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li {
        font-size: 0.9em;
        font-weight: normal;
    }
    blockquote footer {
        font-size: 0.7em;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .row > div > div h1 {
        font-size: 1.6em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li {
        font-size: 1.2em;
        font-weight: normal;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .row > div > div h1 {
        font-size: 2em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li {
        font-size: 1.4em;
        font-weight: normal;
    }
}

/* extra small devices (phones, 450px and down) */
@media (max-width:450px) {
    .row#intro > div > div {
        bottom: 10%;
        left: 10%;
    }

    .row#om > div > div {
        bottom: 3%;
        left: 10%;
        width: 70%;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 4px;
    }

    .row > div div p {
        font-size: 0.5em;
    }
}

/* Small devices (tablets, 450px and up) */
@media (min-width:450px) {
    .row#intro > div > div {
        bottom: 5%;
        left: 5%;
    }

    .row#om > div > div {
        bottom: 5%;
        left: 5%;
        width: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 4px;
    }
}
/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .row#intro > div > div {
        bottom: 10%;
        left: 10%;
    }

    .row#om > div > div {
        bottom: 10%;
        left: 10%;
        width: 50%;
        background-color: transparent;
        padding: 0px;
        color: black;
    }
}

<div id="intro" class="row">
        <div class="col-sm-12 padding-0">
            <img class="img img-responsive" src="http://teknologitalenter.dk/img/villiam.jpg" />
            <div>
                <h1>
                    Header
                </h1>
                <p>Sub header.</p>
            </div>
        </div>
    </div>
<div class="row" id="om">
        <div class="col-sm-12 padding-0">
            <img class="img img-responsive" src="http://teknologitalenter.dk/img/oculus.jpg" />
            <div>
                <p>
                    Section text
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis pulvinar nisi sed sagittis. Donec ultricies id leo a ultricies. Praesent nunc ex, commodo vel vestibulum mollis, pretium vel purus. Donec suscipit nulla est, interdum varius risus sollicitudin vel. Cras tortor neque, vehicula non massa in, iaculis scelerisque ipsum. Cras vel dignissim lorem. Morbi pellentesque orci nec nulla vehicula, ac condimentum lectus scelerisque. Sed dolor arcu, condimentum sagittis nisi quis, mollis convallis nunc. Mauris mollis, lacus non interdum faucibus, ligula leo faucibus mauris, nec sodales lectus nulla sit amet mauris. Sed non viverra lectus. Maecenas at fringilla felis.

In iaculis tellus eu felis placerat, et aliquet augue rutrum. Praesent lectus diam, blandit sed vehicula at, venenatis quis lorem. Nunc auctor pretium odio, ac rutrum diam ullamcorper ut. Proin vitae ornare magna. In sapien risus, dapibus id sagittis at, gravida et leo. Fusce lectus neque, mattis eget magna non, iaculis laoreet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel dapibus lacus, ut efficitur ligula. Nunc vel justo condimentum, ullamcorper erat ut, sollicitudin ante. Sed nec ornare sapien. Praesent non neque quam. Aenean eget justo sodales, vehicula ex sit amet, cursus nisl. Integer suscipit massa commodo, accumsan dolor eget, condimentum dolor.

Cras ut dolor sed purus elementum ornare. Fusce posuere suscipit nulla, sed efficitur mauris pellentesque eget. Mauris molestie pulvinar sapien tempor vehicula. Pellentesque volutpat laoreet arcu sit amet iaculis. Pellentesque semper, mi vitae placerat tincidunt, arcu nulla maximus dui, viverra ultrices sapien nibh in lectus. Etiam scelerisque elit erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel maximus ipsum, a vehicula enim. Phasellus eu velit quis arcu dapibus posuere.

Phasellus arcu felis, tristique ac cursus non, iaculis nec sem. Nullam fermentum ligula vel nisi condimentum maximus. Donec pulvinar auctor est. Sed justo diam, dignissim quis bibendum vel, pharetra in lectus. Morbi molestie dolor eu posuere tempus. Curabitur maximus sem sit amet semper dignissim. Cras vehicula, purus sed volutpat molestie, ex purus ultrices dolor, eu suscipit sem dolor ac ante. Aliquam elementum arcu ac lacus faucibus iaculis. Sed faucibus arcu sed nisi ultricies commodo. Donec erat diam, aliquet vitae lacus quis, tincidunt pellentesque purus. Ut vulputate lectus leo. Duis varius dapibus orci. Etiam semper est ac semper aliquam. Ut sollicitudin, tortor sed imperdiet pharetra, nisi leo faucibus turpis, pretium euismod urna felis quis leo. Aenean hendrerit ante quis euismod porttitor. Integer interdum ex vitae lacus suscipit consequat.

Aliquam venenatis nibh non nisi ullamcorper, at molestie ipsum consectetur. Nulla tempor felis eu tellus molestie, eget pretium dolor vehicula. Morbi ultricies elit leo, sagittis malesuada risus feugiat vel. Curabitur pretium, enim non finibus malesuada, neque velit suscipit tellus, non varius nunc ante vitae nisi. Sed pulvinar, neque non dignissim tincidunt, velit purus suscipit nibh, ac finibus sapien tortor quis turpis. Proin at justo vel nulla finibus fringilla vel id augue. Nulla in erat auctor, rutrum quam vitae, faucibus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ornare turpis.
                </p>
            </div>
        </div>
    </div>

Here i still got the problem, the text from the 2nd div heads into the first
Thanks, that seems to do the trick, now its just up to me to get it working with the rest of the site. :)

Collectives™ on Stack Overflow

div size and overflow

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related