Adjusting CSS Div Blocks for Different Screen Sizes

Question

Adjusting CSS Div Blocks for Different Screen Sizes

I am currently working on designing a page layout that includes two sidebars and a main article area. My goal is to have the sidebars stack vertically beside the main area when viewed on a tablet or phone, with both eventually moving below it. However, I am facing an issue where I cannot get them to display in the correct order after re-ordering.

The three sections on the left show how I want the layout to look on desktop/tablet/phone, while the right pages show how it currently appears. Essentially, I need section 5 to move up under section 4 and section 3 to move beside sections 4 and 5 for the tablet view. Then for the phone view, section 4 should move down under section 3.

Hopefully that explanation makes sense. I am using Dreamweaver for this project. Thank you for any assistance!

Click here to see a visual representation of what I mean!

html css

Answer 1

Answer №1

To achieve this, it is necessary to have knowledge of specific heights.

Here is the demo link: http://jsfiddle.net/BramVanroy/Pt7sS/

In order for this code to function properly, the heights of #contentWrap and #sideRight must be determined. If these values are unknown, they can be obtained using jQuery.

html, body, #header1, #header2, #contentWrap {
    width: 100%
}

#header1 {
    background: red;
    height: 50px
}

#header2 {
    background: green;
    height: 40px
}

#sideLeft, #main, #sideRight {
    box-sizing: border-box;
    float: left;
    height: 200px
}

#sideLeft, #sideRight {
    width: 20%;
    background: #333
}

#main {
    background: grey;
    width: 60%
}

@media screen and (max-width: 768px) {
    #main {
        float: right;
        width: 65%
    }

    #sideRight {
        clear: left
    }

    #sideRight, #sideLeft {
        width: 35%;
        height: 100px
    }
}

@media screen and (max-width: 480px) {

    #sideLeft, #main, #sideRight {
        float: none;
        width: 100%;
        position: absolute
    }

    #contentWrap {
        position: relative;
        height: 400px
    }

    #main {
        top: 0
    }

    #sideLeft {
        bottom: 100px
    }

    #sideRight {
        bottom: 0
    }
}

Answer 2

To achieve this, it is necessary to have knowledge of specific heights.

Here is the demo link: http://jsfiddle.net/BramVanroy/Pt7sS/

In order for this code to function properly, the heights of #contentWrap and #sideRight must be determined. If these values are unknown, they can be obtained using jQuery.

html, body, #header1, #header2, #contentWrap {
    width: 100%
}

#header1 {
    background: red;
    height: 50px
}

#header2 {
    background: green;
    height: 40px
}

#sideLeft, #main, #sideRight {
    box-sizing: border-box;
    float: left;
    height: 200px
}

#sideLeft, #sideRight {
    width: 20%;
    background: #333
}

#main {
    background: grey;
    width: 60%
}

@media screen and (max-width: 768px) {
    #main {
        float: right;
        width: 65%
    }

    #sideRight {
        clear: left
    }

    #sideRight, #sideLeft {
        width: 35%;
        height: 100px
    }
}

@media screen and (max-width: 480px) {

    #sideLeft, #main, #sideRight {
        float: none;
        width: 100%;
        position: absolute
    }

    #contentWrap {
        position: relative;
        height: 400px
    }

    #main {
        top: 0
    }

    #sideLeft {
        bottom: 100px
    }

    #sideRight {
        bottom: 0
    }
}

Adjusting CSS Div Blocks for Different Screen Sizes

Answer №1

Similar questions

I am curious about how to implement overflow:hidden along with position:sticky in React.js

Guide to Embedding a SQL Table into an HTML Table

What causes RangeError: Maximum call stack size exceeded when Element UI event handlers are triggered?

How can Selenium in Python be used to click a JavaScript button?

What are some ways to apply selector combinators to hashed CSS module classes?

Having trouble with CSS basics? Seeing properties change across multiple classes?

Two-column dropdowns without the use of tables

I am looking to expand the width of the Bootstrap container specifically for the Max width

"Woops! An error occurred with the message: "SassError: Could not locate the specified target selector" while working with SCSS Modules and incorporating

Parsing HTML code using PHP's DOM parser for iteration

Is there a way to have one element automatically expand when another is selected?

Solve the problem with SCSS at the component level in NextJS

Utilize a function within styled-components

Understanding how to extract a specific value key from a JSON object in Typescript while utilizing Angular can greatly

Having trouble with the border styling on my HTML input form

Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

I'm having issues getting my fancybox to display properly

If the span id includes PHP data that contains a certain phrase

Seamlessly adaptive HTML5 video playback

I am unable to view the input appearing inside the input box on my React/HTML application