CODEWITHSUNDEEP
htmlcss
Dave Lalande
Dave Lalande

Reputation: 194

2 column design with stacking order

I've been trying everything I can think of to get two columns to stack properly and still haven't nailed it. I sure there are multiple ways to do it.

I'm trying to get a grid like this and then a mobile friendly stacking order.

 1      2
 3      4
 5

So on mobile they are

1
2
3
4
5

My CSS: 

<style>
.flatwrapper {
    width: 780px;
}

.flatcontent {
    display: inline-block;
    width: 320px;
    float: left;
    margin: 0 50px 15px 0;
}

.docpic {
    float: left;
    width: 53px;
    height: 75px;
    z-index: 2;
}

.contact {
    position: relative;
    background-color: #2ECC71;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact:hover {
    background-color: #27AE60;
}

.contact2 {
    position: relative;
    background-color: #E67E22;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact2:hover {
    background-color: #D35400;
}

.contact3 {
    position: relative;
    background-color: #3498DB;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact3:hover {
    background-color: #2980B9;
}

.contact4 {
    position: relative;
    background-color: #95A5A6;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact4:hover {
    background-color: #7F8C8D;
}

.contact5 {
    position: relative;
    background-color: #F1C40F;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact5:hover {
    background-color: #F39C12;
}

.boxtext {
    font-size: 12pt;
    color: white;
    opacity: .9;
    font-weight: 300;
    padding-left: 10px;
    padding-top: 18px;
    ) 
@media screen and (max-width: 710px) {
        .flatwrapper {
            width: 320px;
        }
        .flatcontent {
            margin: 0 0 15px 0;
        }
    }
</style>

My HTML:

<div class="flatwrapper">
<div class="flatcontent">
    <div class="docpic">
        <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/glanton_75_high.jpg" width="53" />
    </div>
    <a href="tel:5733242241">
    </a>
    <div class="contact">
        <a href="tel:5733242241">
            <p class="boxtext">Dr. Glanton - Pain Management
                <br /> Click to Call (573)629-3363</p>
        </a>
    </div>
</div>
<div class="flatcontent">
    <div class="docpic">
        <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/alvi_75_high.jpg" width="53" />
    </div>
    <a href="tel:5736293300">
    </a>
    <div class="contact2">
        <a href="tel:5736293300">
            <p class="boxtext">Dr. Alvi - Cardiology
                <br /> Click to Call (573)629-3300</p>
        </a>
    </div>
    </div>
</div>
<div class="flatcontent">
<div class="docpic">
    <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/valuck_75_high.jpg" width="53" />
</div>
<a href="tel:5736293300">
</a>
<div class="contact3">
    <a href="tel:5736293300">
        <p class="boxtext">Dr. Valuck - Cardiology
            <br /> Click to Call (573)629-3300</p>
    </a>
    </div>
</div>
<div class="flatcontent">
<div class="docpic">
    <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/greving_75_high.jpg" width="53" />
</div>
<a href="tel:5736293400">
</a>
<div class="contact4">
    <a href="tel:5736293400">
        <p class="boxtext">Dr. Greving - Internal Medicine
            <br /> Click to Call (573)629-3400</p>
    </a>
    </div>
</div>
<div class="flatcontent">
<div class="docpic">
    <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/metlis_75_high.jpg" width="53" />
</div>
<a href="tel:5736293500">
</a>
<div class="contact5">
    <a href="tel:5736293500">
        <p class="boxtext">Dr. Metlis - Plastic Surgeon
            <br /> Click to Call (573)629-3500</p>
    </a>
    </div>
</div>
</div>
</div>

Upvotes: 1

Views: 31

Answers (2)

creativelopez
creativelopez

Reputation: 1

You're floating the flatcontent class, causing all of them to float rather than separate into columns. You can use a flatwrapper for each column, and when the media query hits the desired breakpoint, change that class's float to 'none' so that it stacks underneath the other flatwrapper div.

Upvotes: 0

floor
floor

Reputation: 1572

Alright so Change you media query to this:

@media screen and (max-width: 710px) {
    .flatwrapper {
        width: 100%;  <-- full width optional I don't know why you wanted it to be 320px
    }
    .flatcontent {
        margin: 0 0 15px 0;
        width:100%;  <-- this needs to be 100% forcing the floated elements to take up all the block space
    }
}

So when you float elements to make columns you can give them 100% width which will push all the rest of the floated columns below the 100% block.

Oh and in the last css style before your media query you closed it off with a ) change that to }

.boxtext {
font-size: 12pt;
color: white;
opacity: .9;
font-weight: 300;
padding-left: 10px;
padding-top: 18px;
} <-- add this

Upvotes: 1

Related Questions