CODEWITHSUNDEEP
htmlcssresponsive
lologic
lologic

Reputation: 469

align two divs side by side with floating (responsive)

how can I make this container responsive so the text and the img automatically become block elements. I tried it out with flex direction but for someway it doesnt work. Can someone correct my code if necessary and suggest me a media query rule for the responsive design

<div class="top">
    <h1>Welcome</h1>
    <div class="portrait">
       <img src="https://pixy.org/images/placeholder.png" alt="">
       <h2>XXXXXXXXXX</h2>
    </div>
</div>

.top h1{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
   background-color: black;
   height: 20vw;
   margin-top: 0;
   font-size: 5vw;
   color: white;
   text-shadow: 5px 5px rgb(142, 135, 136);
}

.top img {
   width: 20vw;
}

thanks in advance

Upvotes: 1

Views: 3885

Answers (2)

Dejan.S
Dejan.S

Reputation: 19128

I think this is what you are after. display: flex; is very powerful property and useful when it comes to take up rest of the space and centering.

Modification
here is a demo, I would not suggest this approach with using max-width as it's not "mobile-first". But if this is what you want for this project then ok. 

.container {
  display: flex;
  flex-direction: row;
  background-color: deepskyblue;
}

#img {
  width: 140px;
  height: 140px;
}

#text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background-color: deeppink;
  min-height: 100px;
}

@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
  } 

  #img {
    width: 100%;
    height: auto;
  }
}


.container {
  display: flex;
  background-color: deepskyblue;
}

#img {
  width: 140px;
  height: 140px;
}

#text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background-color: deeppink;
}
<div class="container">
  <img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png" />
  <div id="text">text on the left, next to the img</div>
</div>

Upvotes: 4

Gacci
Gacci

Reputation: 1398

Ok, well so here it is if I understood well what you are trying to accomplish. Correct me or update your question if I am wrong!

#img{
  width: 200px;
  height: 150px;
  float: left;
}
#text{
  overflow: hidden;
}
<div class="container">
    <img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/>
    <div id="text">text on the left, next to the img</div>
    
</div>

Upvotes: 0

Related Questions