Displaying images one by one while keeping the responsiveness

Question

I have made myself a website with simple html & css to enchance my skills in this area while also learning responsive design.

I want to display these 3 images, on my mobile view also, but they keep going on the right side which causes really much whitespace on the right side, and the images not being correctly displayed where I want it to be. It currently goes to the right side, which causing whitespace on the right side. How to accomplish to fix this?

I have tried media querieres for responsiveness with the following snippet.

@media only screen and (max-width:700px) {
   .articles {
    margin: 50px 30px;
   }
   .article {
    left: 0;
    width:100%;
   }
}

And my html for the images.

<!-- ROW 1 -->

<section class="articles">


    <article class="article">
      <img class="article-image" src="/images/layer-2.jpg">
      <div class="article-text-wrapper">
        <h3 class="article-title">Issue 1</h3>
        <div class="article-description">

        </div>

      </div>
    </article>

    <article class="article">
      <img class="article-image" src="/images/layer-4.jpg">
      <div class="article-text-wrapper">
        <h3 class="article-title">Issue 2</h3>


        </div>

      </div>
    </article>

    <article class="article">
      <img class="article-image" src="/images/layer-6.jpg">
      <div class="article-text-wrapper">
        <h3 class="article-title">issue 3</h3>

      </div>
    </article>

  </section>

Possible duplicate of [How to center absolutely positioned element in div?](https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div) — Aman Garg, Jun 13 '18 at 07:46
Why .article { left: 0; width:100%; } ? Is the non-default position defined? + width: 100% is by default — VXp, Jun 13 '18 at 11:54

score 3 · Accepted Answer · edited Jun 13 '18 at 11:53

3

Give the img width: 100%:

.article img {
  width: 100%;
}

edited Jun 13 '18 at 11:53

VXp

11,598
6
31
46

answered Jun 13 '18 at 07:30

Gregor Ojstersek

1,369
7
12

Displaying images one by one while keeping the responsiveness

1 Answers1