CODEWITHSUNDEEP
htmlcssmobilealignmentdivision
Andrea P.
Andrea P.

Reputation: 55

How can I fix mobile problems placing divs side by side?

I would like to place div side by side, and I done it.

<div style="width:800px;">
  <div style="width:300px; float:left;"></div>
  <div style="width:300px; float:right;"></div>
</div>

But on mobile I would like to show a div, go to the end of the line and show other div.

Thanks!

Upvotes: 1

Views: 65

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16251

Set display: none; to other div and use @media-query and then set display:inline

Learn about media-query:https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

@media screen and (min-width: 600px){
.other{
    display:inline!important;
    }
}
<div style="width:800px;">
  <div style="width:300px; float:left;">text1</div>
  <div style="width:100px;display: none;" class="other">Othe div</div>
  <div style="width:300px; float:right;">text2</div>
</div>

Upvotes: 1

Nandita Sharma
Nandita Sharma

Reputation: 13407

You can do this using flex

.abc {

width:800px;
}
@media screen and (min-width: 600px) {
  .abc {
display: flex;
  }
}
<div class="abc">
  <div style="width:300px; background-color: red;">Div 1</div>
  <div style="width:300px; background-color: yellow;">Div 2</div>
</div>

Upvotes: 0

Related Questions