Format six images in a horizontal row for desktop and ensure they resize appropriately for mobile viewing

I am looking to arrange images of different sizes in rows depending on the device orientation. For desktop, I want 6 images with proper margins, 2 images in a line for portrait, and 4 images for landscape orientation. Any extra images should be placed 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 have experimented with float: left and display:inline-block, but they did not produce the desired outcome. Thank you in advance for your help.

csssassbootstrap-4

Answer №1

To achieve the desired layout, a combination of flexbox and media queries can be used. Below is an example code snippet for reference:

.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;
    }
}

For a better understanding, please refer to the following fiddle link: https://jsfiddle.net/harsh89/x40kagm6/9/

Answer №2

To implement a grid layout, utilize the display: grid property.

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

Check out the example on JSFiddle: https://jsfiddle.net/y8pLs57g/

Answer №3

Here's a suggestion:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to utilize Bootstrap for containing text inside of a background

<div class="container"> <div class="row"> <div class="col-lg-9"> <h2 style="font-family:times-new-roman">BIOGRAPHY</h2> <div id="demo" class="collapse"> <p> Isaac Newton (4 January 1643 – 31 March 1727) w ...

htmlbootstrap-4

auto-scrolling webpage as elements come into view

Here is some jQuery code I have: $(".col-md-12").hide(); $(".button-div").hide(); $(".featurette-divider").hide(); $(".footer").hide(); $(".first").fadeIn(1000); $(".second").delay(900).fadeIn(1000); $(".third").delay(1800).fadeIn(1000); $(".fourth").dela ...

javascriptjqueryhtmlcss

Divided screen showcasing one movable panel

I am currently working on a design where I have a container with a specified maximum height. Inside this container, there are two separate divs. One of these divs (the footer) has a fixed height of 55px, while the other is a scrollable div that adjusts its ...

htmlcss

Differences between flexible and fixed-width columns in responsive grid layouts

Recently, I've been diving into the world of flexbox and creating my own grid system. Traditionally, when building a grid system using floats, you have to calculate the number of columns per layout and assign percentages for each column's width. ...

cssresponsive-designflexboxgrid-system

When implementing CSS object-fit: contain on an image, it may result in empty spaces surrounding the image

Within my image-wrapper container, I have an image with a variable resolution. The container itself has fixed dimensions for height and width. My goal is to center the image within the container both horizontally and vertically while adding a box-shadow e ...

htmlcssobject-fit

The concepts of width and min-width in CSS allow for controlling

I have a table with the following styles applied: width: auto; min-width: 98.5%; When viewing in Chrome, the table inside a div appears to only be about 50% of the width of the containing div. However, in IE9, the table occupies the full width. Checking ...

css

What determines the root element of the CSSOM (CSS Object Model)?

As I dive into my research on browser rendering, I've reached the stage in the rendering process where the browser creates the CSSOM from raw CSS. In many tutorials I've encountered, the authors confidently state that the body element is the roo ...

cssdomcssom

Generate several invoices with just a single click using TypeScript

I'm interested in efficiently printing multiple custom HTML invoices with just one click, similar to this example: https://i.sstatic.net/hAQgv.png Although I attempted to achieve this functionality using the following method, it appears to be incorr ...

javascripthtmlcssangulartypescript

What could be the reason for my post container not functioning properly?

I am facing an issue with my HTML and CSS code. The container is not displaying as expected, specifically the green bar that should appear below the image. I suspect that the container's auto attribute is causing it to overlook the content inside. Can ...

htmlcsspostcontainers

Tips for effectively utilizing the display:none property to conceal elements and permanently eliminate them from the DOM

While working on my website, I utilized CSS media queries to hide certain elements by using display: none. Even though this effectively hides the element from view, it still lingers in the DOM. Is there a way to completely eliminate the element from the ...

javascriptjquerycss

What are the different approaches for creating a website that adapts to different screen sizes and devices

The popularity of responsive web design is growing rapidly. While many recognize Twitter Bootstrap as a top framework, there are other options worth exploring. Several impressive examples of responsive websites, such as Smashing Magazine and CSS Tricks, ...

htmlcssresponsive-designmedia-queries

What is the best way to align paragraphs vertically within a required square-shaped div using CSS (with images for reference)?

I am trying to style a table in a specific way, but I'm facing some challenges. First, I want to make the internal div inside the table square with a percentage height. Next, I need to have two paragraphs stacked on top of each other within the same ...

htmlcssflexbox

What is the solution for aligning <grid> containers to match the height of the tallest container in the row?

I've been grappling with a CSS issue. I'm attempting to ensure that my accordion containers within my layout all have the same height as the tallest item on their respective rows. This would create a sleek and responsive layout where all items ar ...

htmlcssmaterial-ui

I'm having trouble getting the modal to load automatically when the page loads. The usual bootstrap method doesn't seem to be working, and I'm

Trying to make a modal load on page load seems like a simple task, but for some reason, it just won't work! It functions perfectly fine when triggered by a click. The bootstrap and jquery scripts are included as shown below: <script src="https:/ ...

jquerybootstrap-4

Having trouble retrieving the text from a selected item in a Bootstrap Dropdown Menu using React and Jquery

Check out this Bootstrap 4 code snippet featuring a dropdown menu: <div className="btn-group show"> <button className="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data ...

jqueryreactjsdrop-down-menubootstrap-4

Background Patterns on Webpages

My website has a lovely gradient background on the html tag in css, while the body tag showcases a seamless pattern repeating on both the x and y axes. Everything was looking great until I checked the website on an iPad/iPhone in portrait mode, where the ...

javascriptjqueryhtmlcssweb

Creating a CSS auto center for elements, with a unique twist

I have a design layout like this: Click here to view the image My auto-centered content is styled with the following CSS: width: 960px; margin: 0px auto; Within this auto-centered content, there is a DIV element that needs to span the full width of the ...

htmlcss

Adding an id to a ul tag using JavaScript

I am trying to dynamically add an ID called "myMenu" using JavaScript to a ul element for a search filter. Unfortunately, I am unable to directly access the ul tag to change it, so I need to do it via JavaScript. As I am new to JavaScript, I am looking t ...

javascripthtmljquerycss

Tips for implementing fluid transitions between mouse X and Y coordinates using JavaScript

I recently developed a function that enables a DOM element to follow the mouse cursor. You can check out the code here. Currently, I am looking for suggestions on how to add a nice animation to this feature. Ideally, I want to incorporate a slight delay w ...

javascriptjquerycss

Adjust image size based on the size of the screen

I am facing an issue with two images that are created for a 1024 x 768 resolution but I need to use them in a higher resolution. The challenge is to align these two images so that the circle from the first image falls between the second image. Although I ...

javascripthtmlcss