CSS Two Columns of Lists - Responsive Merge into One Column

CSS Two Columns of Lists - responsive merge into one column

The only way to do this (outside of some very laborious positioning) is to combine the elements into a single list, giving each li a class-name and styling them appropriately:

<div>
    <ul>
        <li class="left">Item A</li>
        <li class="right">Item 1</li>
        <li class="left">Item B</li>
        <li class="right">Item 2</li>
        <li class="left">Item C</li>
        <li class="right">Item 3</li>
        <li class="left">Item D</li>
        <li class="right">Item 4</li>
    </ul>
</div>

li {
    list-style-type: none;
    width: 50%;
}

li.left {
    float: left;
    background-color: #0f0;
}

li.right {
    float: right;
    background-color: #00f;
}

@media only screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: 100%;
    }
}

Updated JS Fiddle demo.

As noted by Hashem, in the comments below, it would be possible to use the :nth-child() selector, rather than class-names, to style the various li elements left, or right:

li:nth-child(odd) {
    float: left;
    background-color: #0f0;
}

li:nth-child(even) {
    float: right;
    background-color: #00f;
}

@media only screen and (max-width: 480px) {
    li {
        float: none;
        width: 100%;
    }
}

Updated JS Fiddle demo.

Mobile responsive css columns with image and text merging into one column

You are along the right lines, but there are a couple of things to correct. Your media queries should appear in the stylesheet after the CSS for the default setup, not at the top of the stylesheet. This is because CSS that comes later will override any CSS settings for the same selector that appeared previously; the last CSS to appear in the sylesheet is used where there is a conflict.

In your case, near the bottom of the CSS you have:
.leftColumn {
position: relative;
margin: .5em;
}
which (since it is not in a media query) applies at all screen widths. So this relative positioning will override the absolute positioning you gave to .leftColum for wider screens higher up, in your media query.

Remember also that for absolute positioning to work on an element, you must give its parent div (or something higher up the tree) a non-default position (usually relative). The rule is, an absolutely positioned element is positioned "relative to the first parent element that has a position other than static" (static being the default). So if your container is columnsContainer (the url you give doesn't seem to have the relevant code on it - only give a url if it shows the actual problem in question!) then set that to position: relative.

Also your left column is actually going to appear on the right side ofthe page, as the query specifies right: 0; and then positions the right column to the left of that. I think you mean:

@media screen and (min-width: 47.5em) {
.leftColumn {
    position: absolute;
    top: 0;
    left: 0;
    width: 18.75em;
    }
.rightColumn {
    margin-left: 19.53em;
}

But lovely to see someone using em units in the media query breakpoints, instead of px units. Many experienced responsive developers don't follow that!

create two column responsive css html design that merges into 1 column when shrunk or viewed on mobile device

You can use mobile first approach to achieve responsive layout. You should expand the CSS by yourself to fit your WordPress theme.

CSS

.linkcontainer {
    width: 100%;
    padding-bottom: 25px;
    overflow: auto;
}
.linkleft, .linkright {
    display: block;
    width: 100%;
}

@media only screen and (min-width: 481px) {
    .linkleft, .linkright {
        display: inline-block;
        width: 50%;
        float: left;
    }
}

Here is the fiddle.

Combine two columns into one on smaller screens?

What you want to use are media queries you can learn more about media queries here https://www.w3schools.com/css/css_rwd_mediaqueries.asp

HTML

<div class="container">
    <div class="container__col-1">
        <div class="box">
            Main content in left column here...
        </div>
        <div class="box">
            More main content here...
        </div>
        <div class="box">
            Even more main content here...
        </div>
    </div>
    <div class="container__col-2">
        <div class="box">
            Some side content in the right column here...
            I would like this to stack under the main content on small screens...
        </div>
    </div>
</div>

If you look I have created some classes for you

CSS

.container{ // this is your main container that holds the two columns
    display: flex;
    flex-direction: row;
}
.container__col-1{ // this is your first column set to 50% width of the parent container
    width: 50%;
}
.container__col-2{ // this is your second column set to 50% width of the parent container
    width: 50%;
}
// this is a media query what this does is says when the screen size is smaller than 768px use these styles 
@media(max-width: 768px){ 
    .container{
       flex-direction: column;
    }
    // now your first column will take the full width of the parent 
    // container which will push the second column below it
    .container__col-1{ 
       width: 100%;
    }
    .container__col-2{
       width: 100%;
    }
}

obviously you will need to alter this to your use case but this is in a nutshell how you would do what you want

Responsive, two-column layout: Move one column in between other column

Here's a general solution using one flex container:

<div class="container">
    <div class="box"> ... </div><!-- red box -->
    <div class="box"> ... </div><!-- green box -->
    <div class="box"> ... </div><!-- yellow box -->
</div>

---

Starting with small screens (for no particular reason), stack them in a column:

.container {
    display: flex;
    flex-direction: column;
}

.box {
    height: 100px;
    width: 100%;
}

---

Re-arrange the layout for wider screens:

@media (min-width: 800px) {

   .container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .box {
        flex-basis: 45%;
    }
}

On screens wider than 800px, the container lines the items in a row and enables wrapping. Each box is given a large enough width (flex-basis) for only two to fit on a line.

---

Full demo:

* {

    box-sizing: border-box;

}

.container {

    display: flex;

    flex-direction: column;

    padding: 5px 0;

    background-color: #f5f5f5;

    border: 1px solid #aaa;

}

.box1 { background-color: red; }

.box2 { background-color: lightgreen; }

.box3 { background-color: yellow; }

.box {

    height: 100px;   /* `flex-basis: 100px` would also work */

    width: calc(100% - 20px);

    margin: 5px 10px;

    border: 1px solid #ccc;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.2em;

}

@media (min-width: 800px) {

    .container {

        flex-direction: row;

        flex-wrap: wrap;

    }

    .box {

        flex-basis: 45%;

    }

}

<div class="container">

    <div class="box box1"><span>1</span></div>

    <div class="box box2"><span>2</span></div>

    <div class="box box3"><span>3</span></div>

</div>

---

Related Topics