CODEWITHSUNDEEP
csssassbootstrap-4
shen4
shen4

Reputation: 242

Style 6 images to inline in a single row for desktop and responsiveness to mobile orientation

I want to display different sizes of images in rows. 6 images with proper margins for desktop, 2 images in a line for portrait and 4 images for landscape orientation. Extra images should be in a new line and aligned center.

<div class="wrapper">
    <div class="media-elements ">
        <div class="common-image">
            <figure class="figure">
                <img src="img1.png" class="img-fluid" alt="" title="">
                <figcaption class="figure-caption">
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="media-elements ">
        <div class="common-image">
            <figure class="figure">
                <img src="img2.png" class="img-fluid" alt="" title="">
                <figcaption class="figure-caption">
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="media-elements ">
        <div class="common-image">
            <figure class="figure">
                <img src="img3.png" class="img-fluid" alt="" title="">
                <figcaption class="figure-caption">
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="media-elements ">
        <div class="common-image">
            <figure class="figure">
                <img src="img4.png" class="img-fluid" alt="" title="">
                <figcaption class="figure-caption">
                </figcaption>
            </figure>
        </div>
    </div>
</div>

I tried float: left and display:inline-block but none of these give me expected results. Thanks in advance.

Upvotes: 0

Views: 121

Answers (3)

user6913790
user6913790

Reputation:

Try this:

.figure {
  float: left;
  width: 33.33%;
  padding: 5px;
}
.common-image::after {
  content: "";
  clear: both;
  display: table;
}

Upvotes: 1

Harsh
Harsh

Reputation: 1695

You would need to use a combination of flex and media query. I have compiled an example for you but you can further improve it.

.slider {
    display: flex;
    width: 100%;
    height: auto;
    margin: 20px auto;
    text-align: center;
}

@media only screen and (max-width: 1024px) {
    .slider {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
}

Please check the fiddle below. https://jsfiddle.net/harsh89/x40kagm6/9/

Upvotes: 2

elveti
elveti

Reputation: 2376

You can use display: grid

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
figure img {
  width: 100%;
}

JSFiddle: https://jsfiddle.net/y8pLs57g/

Upvotes: 1

Related Questions