Html - How to display title next to an icon rather than on the side, on a particular media query?

shawn
July 17, 2023
253 views
0 votes
2 Answers

I have this HTML that has a title, icon and content. Here is a picture of how it looks:

My question is, only on 766px window size, how can I display the title next to icon and move the content below the title?

I am not able to move the title even if I remove display: flex; from the CSS.

.article {
    display: flex;
    position: relative;
    overflow: hidden;
    padding: 0px 8px 0px 8px;
}

.title {
    width: 100px;
    float: left;
}

.title h3 {
    padding-right: 24px;
}

.icon,
.content {
    margin: 18px 0px 0px 18px;
}

.icon {
    border-radius: 14px;
    height: 28px;
    width: 28px;
    color: #fff;
    background-color: #770000;
    padding: 4px;
    margin-left: -28px;
    box-sizing: border-box;
}

.content {
    padding: 13px 13px 13px 13px;
    max-width: 585px;
    background: #f4efef;
    border: 1px solid #e2e2e2;
    color: #000;

}


.content::before {
    content: '';
    position: absolute;
    height: calc(100% + 28px);
    width: 2px;
    background: #2dd293;
    margin-top: 30px;
    margin-left: -48px;
}

.article:last-child .content::before {
    display: none;
}

@media (max-width: 766px) {
    .article .content {
        width: 75%;
    }
}

<div class="myList">
    <div class="article">
        <div class="title">
            <h3>Mars</h3>
        </div>
        <div class="icon">
            <i class="fas fa-mars"></i>
        </div>
        <div class="content">
            <p>Mars is the fourth planet and the furthest terrestrial planet from the Sun.:</p>
        </div>
    </div>
</div>

Answers

Each flex refers to its immediate children, so if you want the content below the title+icon, you should seperate them into 2 children rather than 3.

btn.onclick = function() {
  document.querySelector(".article").classList.toggle("small-width")
}

.as-one-unit {
  display: flex;
}

.article {
  display: flex;
}

div {
  padding: 10px;
}

.article.small-width {
  flex-wrap: wrap;
}

.article.small-width .content {
  width: 100%
}

.article.small-width .as-one-unit {
  flex-direction: row-reverse;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />

<div class="myList">
  <div class="article">
    <div class="as-one-unit">
      <div class="title">
        <h3>Mars</h3>
      </div>
      <div class="icon">
        <h3><i class="fas fa-mars"></i></h3>
      </div>
    </div>
    <div class="content">
      <p>Mars is the fourth planet and the furthest terrestrial planet from the Sun.:</p>
    </div>
  </div>
</div>

<button id="btn">toggle media-query</button>

Have made a few changes to your snippet.

You can use the other properties of flexbox to achieve this in an easy way.

Find the proper way to handle the condition below:

PS: You can reduce the lines of CSS codes if you have no other purpose of the same class.

.article {
    display: flex;
    position: relative;
    overflow: hidden;
    padding: 0px 8px 0px 8px;
}

.title {
    width: 100px;
    float: left;
    display: flex;
    margin-right: 20px;
}

.title h3 {
    padding-right: 24px;
}

.icon {
    margin-top: 15px;
    border-radius: 14px;
    height: 28px;
    width: 28px;
    color: #fff;
    background-color: #770000;
    padding: 4px;
    box-sizing: border-box;
}

.content {
    padding: 13px 13px 13px 13px;
    max-width: 585px;
    background: #f4efef;
    border: 1px solid #e2e2e2;
    color: #000;
}

.content::before {
    content: '';
    position: absolute;
    height: calc(100% + 28px);
    width: 2px;
    background: #2dd293;
    margin-top: 30px;
    margin-left: -48px;
}

.article:last-child .content::before {
    display: none;
}

@media (max-width: 766px) {
    .article {
        flex-direction: column;
    }
    .article .content {
        width: 75%;
        align-self: end;
    }
    .title {
        flex-direction: row-reverse;
    }
    .title h3 {
        padding: 0 0 0 24px;
    }
}

<div class="myList">
    <div class="article">
        <div class="title">
            <h3>Mars</h3>
            <div class='icon'></div>
        </div>
        
        <div class="content">
            <p>Mars is the fourth planet and the furthest terrestrial planet from the Sun.:</p>
        </div>
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to display title next to an icon rather than on the side, on a particular media query?

Answers