CODEWITHSUNDEEP
htmlcssresponsive-design
Ian
Ian

Reputation: 105

Scales Divs to content

I'm trying to build a page that can run at full screen but as it scales down the divs drop and fit the content and allow scrolling. At fullscreen I'd like one big box with three little boxes on the bottom. The content in the big box changes dynamically so the div needs to be able to scale on a lower resolution device. Also, on a lower resolution device I would like the bottom three boxes to stack on top of one another and all be a fixed width to fit all of their contents. My main issue is text spilling out of the big box and being unreadable on smaller screens.

Here is the HTML:

    <body>
    <div class="container">
        <div class="content">
        </div>
    </div>
    <div class="footer">
        <div class="widget1">
            <div class="widget_contents">
            </div>
        </div>
        <div class="widget2">
            <div class="widget_contents">
            </div>
        </div>
        <div class="widget3">
            <div class="widget_contents">
            </div>
        </div>
    </div>
    </body>

Here is the CSS:

*{box-sizing: border-box;}
html{height: 100%;}
body{height: 100%;}

.container {
    height: 80%;
    width: 100%;
    padding: 1em;
}

.content {
    height: 100%;
    width: 100%;
    background: rgba(150, 50, 50, 1);
}

.footer {
    height: 20%;
    width: 100%;
    padding-right: 1em;
}

.widget1 {
    width: 55%;
    height: 100%;
    padding-left: 1em;
    float: left;
}

.widget2 {
    width: 25%;
    height: 100%;
    padding-left: 1em;
    float: left;
}

.widget3 {
    width: 20%;
    height: 100%;
    padding-left: 1em;
    float: left;
}

.widget_contents {
    height: 100%;
    background: rgba(55, 150, 55, 1);
}

Here is a jdfiddles of my basic layout: http://jsfiddle.net/kzoqwz9n/

Thanks!

Upvotes: 1

Views: 56

Answers (2)

tomtomtom
tomtomtom

Reputation: 899

For allow scrolling, you just need to apply 'overflow:auto;' to your block.

For stack bottom blocks you need to use media queries, something like :

@media screen and (max-width: 600px)
{
    .widget1,.widget2,.widget3 {
        padding-left: 1em;
        float:none;
        width: auto;
    }
}

This exemple will stack your box when the screen is smaller than 600px.

UPDATE :

For the scrolling thing, we need to apply some changes : 

.container {
    min-height: 80%;
    margin: 1em 1em 0 1em;
    background: rgba(150, 50, 50, 1);
}

We delete the style for .content and add 'padding-top: 1em;' to .footer

Exemple here : http://jsfiddle.net/kzoqwz9n/3/

It is what you want to do ? (try to add/remove content)

Upvotes: 1

the8472
the8472

Reputation: 43042

You basically need media queries to apply different rules depending on the viewport size and possibly device orientation and flexboxes for switching between row and column layout

My main issue is text spilling out of the big box and being unreadable on smaller screens.

set the width to width: fit-content; (+ vendor prefixes) to allow the box itself instead of just the text content to spill out of the parent container

Upvotes: 0

Related Questions