CODEWITHSUNDEEP
htmlcssresponsive
zelite
zelite

Reputation: 1488

from 3 columns to 2 columns - stack the 2 on the right

Given this layout:

<div class="myrow">
  <div class="logo">
   <img src="https://unsplash.it/150/150">
  </div>
  <div class="name">
    <p>
    Someperson
    </p>
  </div>
  <div class="description">
  <p>
  longer text goes heeeeeeeeeeeere.
  </p>
  </div>
</div>

I want to have 3 columns when the screensize is big. And at a certain breakpoint the two right columns should become stacked on top of each other.

Big screen:

----------------------------
|logo | name | description |
----------------------------

Smaller screen:

-----------------------
|logo | name           |
|     |----------------|
|     | description    |
-----------------------

Here's the CSS I am using:

div{
  float:left;
}

img{
  width: 100%;
}

  .logo{
  width: 13.3333333333%;
  min-height: 3rem;
}

.name{
  width: 82.6666666667%;  
}

.description{
  width: 82.6666666667%;
}

@media (min-width: 550px) {
  .logo{
    width: 13.3333333333%;
    min-height: initial;
  }

  .name{
    width: 22%;  
  }

  .description{
    width: 56.6666666667%;
  }
}

However, at the small screens, the description will fall down below the logo and stay on the left side. I tried to give a min-height to the logo div, in order to keep it big and prevent the other divs to come to the left, but probably I am not understanding how it works.

JSfiddle: https://jsfiddle.net/4uh3pryw/2/

Upvotes: 3

Views: 70

Answers (4)

himanshu
himanshu

Reputation: 1797

JsFiddle link JSFIDDLE 

 <div class="myrow">
  <div class="logo">
   <img src="https://unsplash.it/150/150">
  </div>
  <div div="box">
  <div class="name">
    <p>
    Someperson
    </p>
  </div>
  <div class="description">
  <p>
  longer text goes heeeeeeeeeeeere.
  </p>
  </div>
  </div>
</div>

css will be

    div{
      float:left;
    }
    img{
      width: 100%;
    }

      .logo{
      width: 13.3333333333%;
      min-height: 3rem;
    }
    .box{width: 50%;}
    .name{
      width: 100%;  
    }

    .description{
      width: 100%;
    }

    @media (min-width: 550px) {
      .logo{
        width: 13.3333333333%;
        min-height: initial;
      }
    .box{width: 82.6666666667%; word-wrap: break-word;}
      .name{
        width: 50%;  
      }

      .description{
        width: 50%;
      }
    }

Upvotes: 1

Puroto
Puroto

Reputation: 153

Your name and description should be in another div, then you set the width you want on that new div. You won't even need to set a media css for the width.

<div class="post">
    <div class="name">
      <p>
          Someperson
      </p>
    </div>
    <div class="description">
        <p>
        longer text goes heeeeeeeeeeeere.
        </p>
    </div>
</div>

css:

.post{
  width: 82.6666666667%; 
}

and you remove the width of 82% on the name and description.

if you want some space between the name and the description, simply add padding to one of those (padding-left for descripttion and right for name).

Upvotes: 1

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

For a better result you need to slightly change your DOM and CSS as well.

HTML:

<div class="myrow">
    <div class="logo">
      <img src="https://unsplash.it/150/150">
    </div>
    <div class="header-info">
      <div class="name">
        <p>
          Someperson
        </p>
      </div>
      <div class="description">
        <p>
          longer text goes heeeeeeeeeeeere.
        </p>
      </div>
    </div>
  </div>

CSS:

    div {
      float: left;
    }

    img {
      width: 100%;
    }

    .logo {
      width: 13.3333333333%;
      min-height: 3rem;
      display: inline-block;
      vertical-align: top;
    }

    .header-info {
      width: 82.6666666667%;
      display: inline-block;
      vertical-align: top;
    }

    .name {}

    .description {}

    .header-info p {
      margin: 0;
      padding: 0 0 0 15px;
      line-height: 4rem;
    }

    @media only screen and (max-width: 580px) {
      .logo {
        min-height: initial;
      }
      .header-info p {
        line-height: normal;
        padding: 5px 0 0 15px;
      }
    }

Take a look into this JSFiddle

Upvotes: 1

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14669

Set float:right in media query @media (min-width: 550px)

.name{
width: 22%;  
float:right
}

.description{
 width: 56.6666666667%;
 float:right
}

Upvotes: 2

Related Questions