(html/css) Position of image not correct on desktop

user_13919400 0
Viewed 91

So I was trying to optimize my website for different ratios. However I can not position the image on the left side and the text on the right side on desktop.

This is my content [html] (text and image):

.wrapper{
    width: 100%;
}

.wrapper img-info{
    width: 100%;
}

.img-info h2{
    width: 100%;
    padding: 30px 30px 20px;
    font-size: 50px;
    color: #111;
    line-height: 44px;
}

.img-info p{
    padding: 0px 30px 20px;
    font-size: 16px;
    color: #111;
    line-height: 24px;
}

.startseite-img{
    width: 100%;
}

@media only screen and (min-width:768px){
    
    .wrapper{
        width: 600px;
        margin: 0 auto;
    }
    
    .img-info h2{
        width: 100%;
        padding: 20px 0px 0px;
    }
    
    .img-info p{
        padding: 20px 0px 0px;
    }
    
    .startseite-img{
        padding-top: 30px;
    }
}

@media only screen and (min-width:1000px){
    
    .wrapper{
        width: 1000px;
    }
    
    .wrapper img-info{
        width: 50%;
        float: right;
    }
    
    .img-info h2{
        padding: 20px 0px 0px 30px;
    }
    
    .img-info p{
        padding: 20px 0px 0px 30px;
    }
    
     .startseite-img{
        padding-top: 0px;
        width: 50%;
        float: left;
    }
}
<div class="wrapper">
  <article class="img-info">
    <h2>Hi!</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, sed diam voluptua.</p>
  </article>
  <img class="startseite-img" src="https://via.placeholder.com/150">
</div>

To give you an idea of my problem here's a screenshot: false positioning with the img When you still have any questions about my problem, you can visit the website kevnkkm.de to see the full html/css source code or just comment on this question!

Thanks in advance! (Also sorry for the facepalms I might have caused xd)

media css image html
4 Answers

Wrap your article and image in a common container, and set it up like this, using Flexbox (in your largest media query):

  .article-container {
    display: flex;
    flex-direction: row;
  }
  .article-container article {
    flex: 1 0 75%;
    order: 2;
  }
  
  .article-container .startseite-img {
    flex: 1 0 25%;
    order: 1;
  }

In Flexbox, you can reorder the elements without touching the HTML code. That's what order: 1 does.

flex: 1 0 75% does this:

  • the first number tells how the element should grow.
  • the second number tells how the element should shrink.
  • the third value is the basis which will be used when calculating the actual grow and shrink values.

Comprehensive info with examples on Flexbox here.

Working example:

expand the snippet to full page to see the code working

.wrapper {
  width: 100%;
}

.wrapper img-info {
  width: 100%;
}

.img-info h2 {
  width: 100%;
  padding: 30px 30px 20px;
  font-size: 50px;
  color: #111;
  line-height: 44px;
}

.img-info p {
  padding: 0px 30px 20px;
  font-size: 16px;
  color: #111;
  line-height: 24px;
}

.startseite-img {
  width: 100%;
}

@media only screen and (min-width:768px) {
  .wrapper {
    width: 600px;
    margin: 0 auto;
  }
  .img-info h2 {
    width: 100%;
    padding: 20px 0px 0px;
  }
  .img-info p {
    padding: 20px 0px 0px;
  }
  .startseite-img {
    padding-top: 30px;
  }
}

@media only screen and (min-width:1000px) {
  .wrapper {
    width: 1000px;
  }
  .article-container {
    display: flex;
    flex-direction: row;
  }
  .article-container article {
    flex: 1 0 75%;
    order: 2;
  }
  
  .article-container .startseite-img {
    flex: 1 0 25%;
    order: 1;
  }
  .wrapper img-info {
    width: 50%;
    float: right;
  }
  .img-info h2 {
    padding: 20px 0px 0px 30px;
  }
  .img-info p {
    padding: 20px 0px 0px 30px;
  }
}
<div class="wrapper">
  <div class="article-container">
    <article class="img-info">
      <h2>Hi!</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et dolore magna aliquyam erat, sed diam voluptua.</p>
    </article>
    <img class="startseite-img" src="16.9%20Placeholder.png">
  </div>
</div>

user_5928870

Here is the modified code. You added the img tag after your text which led the image to be positioned under the text.

<div class="wrapper">
            <img class="startseite-img" src="16.9%20Placeholder.png">
            <article class="img-info">
                <h2>Hi!</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </article>
            
        </div>
user_137761200

Use this snippet

I have put the img tag before article tag and use flex to show them in column

.wrapper{
    width: 100%;
    display:flex;
    justify-content:space-around; 
}
.wrapper .startseite-img{
  max-width:100%;
  width:400px;
  height:400px;
  max-height:auto;
  margin-right:1em;
}
.wrapper img-info{
    width: 100%;
}

.img-info h2{
    width: 100%;
    padding: 30px 30px 20px;
    font-size: 50px;
    color: #111;
    line-height: 44px;
}

.img-info p{
    padding: 0px 30px 20px;
    font-size: 16px;
    color: #111;
    line-height: 24px;
}


@media only screen and (min-width:768px){
    
    .wrapper{
        margin: 0 auto;
    }
    
    .img-info h2{
        width: 100%;
        padding: 20px 0px 0px;
    }
    
    .img-info p{
        padding: 20px 0px 0px;
    }
    .wrapper .startseite-img{
        margin-right:1em;
        margin-top:1em;
  }

}

@media only screen and (min-width:1000px){
    
    .wrapper{
        width: 1000px;
    }
    
    .wrapper img-info{
        width: 50%;
        float: right;
    }
    
    .img-info h2{
        padding: 20px 0px 0px 30px;
    }
    
    .img-info p{
        padding: 20px 0px 0px 30px;
    }
    .wrapper .startseite-img{
        margin-right:1em;
        margin-top:1em;
     }
    
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>image-on-left</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
            <img class="startseite-img" src="https://www.motocms.com/blog/wp-content/uploads/2018/07/css-main-image.jpg">
            <article class="img-info">
                <h2>Hi!</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </article>
        </div>
</body>
</html>

user_103235820 

.wrapper{
    width: 100%;
}

.wrapper .img-info{
    width: 100%;
}

.img-info h2{
    width: 100%;
    padding: 30px 30px 20px;
    font-size: 50px;
    color: #111;
    line-height: 44px;
}

.img-info p{
    padding: 0px 30px 20px;
    font-size: 16px;
    color: #111;
    line-height: 24px;
}

.startseite-img {
    width: 100%;
}

@media only screen and (min-width:768px){
    
    .wrapper{
        width: 600px;
        margin: 0 auto;
    }
    
    .img-info h2{
        width: 100%;
        padding: 20px 0px 0px;
    }
    
    .img-info p{
        padding: 20px 0px 0px;
    }
    
    .startseite-img{
        padding-top: 30px;
    }
}

@media only screen and (min-width:1000px){
    
    .wrapper{
        width: 1000px;
    }
    
    .wrapper .img-info{
        width: 50%;
        float: right;
    }
    
    .img-info h2{
        padding: 20px 0px 0px 30px;
    }
    
    .img-info p{
        padding: 20px 0px 0px 30px;
    }
    
     .startseite-img{
        padding-top: 0px;
        width: 50%;
        float: left;
    }
}
<div class="wrapper">
  <article class="img-info">
    <h2>Hi!</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, sed diam voluptua.</p>
  </article>
  <img class="startseite-img" src="https://via.placeholder.com/150">
</div>

user_133311550
Related