CODEWITHSUNDEEP
htmlcssmobileresponsive-design
Chris Lau
Chris Lau

Reputation: 77

CSS - How to collapse floated right divs underneath on reduced screen width

I currently have a widget looking how I want it to a large screen, but have problems when reducing it to something mobile friendly.

The widget has a title section which was two additional fields which need to be floated to right, and only take up as much width as there is text inside of them. I need the title-text on the left to take up the rest of the remaining space.

this is what it looks like

my HTML looks something like this:

<div class="widget">
    <div class="section-title">
        <div class="title-info">        
            <div class="info-2">Info 2</div>
            <div class="info-1">Info 1</div>
        </div>
        <div class="title-text">Title</div>
    </div>
</div>

CSS looks like this:

.section-title {
    height: 100%;
    font-size: 1.3em;
    color: white;
}

.section-title .title-text {
    background-color: #3261AD;
    padding: 20px;
}

.section-title .title-info {
    display: inline-block;
    float: right;
}

.section-title .info-1{
    background-color: #264D8C;
    padding: 20px;
    display: inline-block;
    float: right;
}

.section-title .info-2{
    background-color: #5BB75B;
    padding: 20px;
    display: inline-block;
    float: right;
}

@media (max-width: 420px) {
    .section-title .title-text {
        /* ??? */
        display: block;
        width: 100%;
        float: left;
    }

    .section-title .title-info {
        /* ??? */
        display: block;
        width: 100%;
    }
}

The problem occurs when I try to reduce the screen width. I'd like the title-info to collapse beneath the title-text, but can't switch the divs around because then the divs don't float to the right in the order that I want. Is there a way of it look like the image below without sacrificing how it looks on full width or creating a separate markup for mobile?

How I want it to look on mobile

Upvotes: 1

Views: 81

Answers (2)

Dominic Bett
Dominic Bett

Reputation: 506

Try using Flexbox Grid Layout. Flexbox Layout Module is inbuilt in CSS3 so you don't have to import any CSS. I find it easier to use in positioning complex element layouts.

.section-title {
  display: inline-flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  font-size: 1.3em;
  color: white;
  width: 100%;
}

.title-text {
  flex-basis: 70%;
  background: #3261AD;
  order: 1;
  padding: 20px;
}

.title-info {
  flex-basis: 30%;
  order: 2;
  display: inline-flex;
  flex-flow: row nowrap;
}

.info-1 {
  background: #264D8C;
  order: 1;
  flex-basis: 50%;
  padding: 20px;
}

.info-2 {
  background: #5BB75B;
  order: 2;
  flex-basis: 50%;
  padding: 20px;
}

@media all and (max-width: 420px) {
  .section-title {
    flex-wrap: wrap;
  }
  .title-info {
    flex-wrap: nowrap;
    flex-basis: 100%;
  }
  .title-text {
    flex-basis: 100%;
  }
  .info-1 {
    flex-basis: 50%;
  }
  .info-2 {
    flex-basis: 50%;
  }
}
<div class="widget">
  <div class="section-title">
    <div class="title-info">
      <div class="info-2">Info 2</div>
      <div class="info-1">Info 1</div>
    </div>
    <div class="title-text">Title</div>
  </div>
</div>

https://jsfiddle.net/yz93799v/

Upvotes: 1

Yash Yadav
Yash Yadav

Reputation: 665

https://jsfiddle.net/cpc4c3kt/

.section-title {
  height: 100%;
  font-size: 1.3em;
  color: white;
}

.section-title .title-text {
  background-color: #3261AD;
  padding: 20px;
}

.section-title .title-info {
  display: inline-block;
  float: right;
}

.section-title .info-1 {
  background-color: #264D8C;
  padding: 20px;
  display: inline-block;
  float: right;
}

.section-title .info-2 {
  background-color: #5BB75B;
  padding: 20px;
  display: inline-block;
  float: right;
}

@media (max-width: 420px) {
  .section-title .title-text {
    /* ??? */
    display: block;
    width: 80%;
    padding:20px 10%;
    float: left;
    transform: translateY(-100%);
  }
  .section-title .title-info {
    /* ??? */
    display: block;
    width: 100%;
    transform: translateY(100%);
  }
  .section-title .title-info>div {
    display: inline-block;
    float: right;
    width: 40%;
    padding: 5%;
  }
}
<div class="widget">
  <div class="section-title">
    <div class="title-info">
      <div class="info-2">Info 2</div>
      <div class="info-1">Info 1</div>
    </div>
    <div class="title-text">Title</div>
  </div>
</div>

Upvotes: 1

Related Questions