Moving divs to a separate line in mobile display

I currently have a basic image-thumbnails landing page set up like this:

<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>

Currently, on desktop view, all four images are displayed side by side. How can I make them appear in pairs on one line in mobile view?

Example of layout change:

Desktop - # # # #

Mobile:

# #

# #

htmlcss

Answer №1

For those comfortable with using clear:both, this solution is recommended.

Check out the updated demo here. It allows for a break at the desired point, utilizing custom media queries that can be adjusted to fit your specific requirements. Hopefully, this will be beneficial in your implementation.

Answer №2

To make div elements have a width of 50% at a specific breakpoint, you will need to implement a media query.

@media (max-width: 400px) {
  div {
    width: 50%;
  }
}
<div style="display: inline-block;">
  <img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
  <img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
  <img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
  <img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>

For more information on CSS media queries, visit: MDN - CSS media queries

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

How can we prevent an ajax call from being made when the user input is empty?

Currently, I am utilizing the keyup event for an Ajax call on an input field along with the f:validaterequired tag. Each time the Ajax event (keyup) triggers, f:validaterequired is being validated. However, I do not want to validate when the value is null. ...

htmlajaxjsfjsf-2.2requiredfieldvalidator

Incorporating and designing an external document

Another website has a file that I would like to include in one of my own pages. The URL format is as follows: http://example.com/path/with/some/variables I could use an iframe to accomplish this, but I also want to customize the CSS of elements within th ...

phphtmlcssiframe

The conceal feature doesn't appear to be functioning properly on jQuery Mobile

I am facing an issue with a small mobile app built using jQuery Mobile. Within a div, I have three buttons and other content. My goal is to hide these three buttons if the user's device is running on Windows (WP). The buttons are defined as follows: ...

javascriptjqueryhtmlcssjquery-mobile

Arrange two absolute divs side by side without overlapping each other

I have a specific layout configuration: <div id="container"> <div class="left"> 1 </div> <div class="left"> 1 </div> <div class="right"> 2 </div> </div> My goal is to stack the left divs on top ...

htmlcss

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

javascripthtmlcsswordpress

Hide custom video controls from view

For a while, I was able to hide the controls on my page using position:absolute; and bottom:-36px, which made them pop up when hovering over the player. Recently, however, I noticed that I can now scroll down to see them. How can I maintain the slide-up ef ...

htmlcss

Learn the steps to update PHP headers on a specific website using AJAX

contactfrm.php <?php // Server side validation $name = $_POST['name']; $surname = $_POST['surname']; $bsubject = $_POST['subject']; $email= $_POST['email']; $message= $_POST['message']; $to = " ...

phphtmlcssajaxforms

Creating a tool that produces numerous dynamic identifiers following a specific format

I am working on a function to create multiple dynamic IDs with a specific pattern. How can I achieve this? followup: Vue.js: How to generate multiple dynamic IDs with a defined pattern Details: I am developing an interactive school test application. Whe ...

javascriptjqueryhtml

What is the best way to include a drop-right menu within a dropdown menu?

Hey there! I'm working on a page that features a dropdown navbar. My goal is to create a secondary dropdown that appears to the right when hovering over an li element within the initial dropdown. Any tips on how to accomplish this? Thanks in advance! ...

htmlcssnavbardropdownsubmenu

Display a division upon choosing an option

I am working on a project that involves a selection menu in the form of a drop-down list. <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> Also, I ...

javascriptjqueryhtmlcss

Creating a Hover Effect for DIV Elements Using Pure CSS, No JavaScript Needed

Imagine a straightforward, horizontal navigation on a website: | Home | About | Products | Contact | Impress | ... or something like that... A rectangular element is positioned above the navigation. Now, I want this rectangle to automatically shift hori ...

htmlcssanimationhover

Missing Bootstrap 3 Options Menu trip away

I created a table with 4 columns using the Bootstrap 3 grid system. Instead of utilizing the col-xs-* classes, which work well on mobile devices, I opted for the col-md-* classes. This decision was based on my preference to have larger and more visible ico ...

htmlcsstwitter-bootstrapmobileoptions-menu

bespoke design picture holder

Is it possible to create a custom-shaped image container without using <div />? I encounter an issue when trying to add corners on top of the #content-box as shown in this screenshot: . The corner images only cover half of the block element, with th ...

csshtml

Enhance the v-autocomplete dropdown with a personalized touch by adding a custom

Currently utilizing the v-autocomplete component from Vuetify, and I am interested in incorporating a custom element into its dropdown menu. You can see the specific part I want to add highlighted with a red arrow in this screenshot: This is the current s ...

javascripthtmlvue.jsautocompletevuetify.js

Tips for updating border color when focused with styled-components

How can I change the border color of an input on focus using styled-components and React? Here is the code snippet I am currently using: import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; const String ...

javascriptcssreactjsstyled-components

retrieve the value of a text form using jQuery and its corresponding id

I need help with a basic HTML form that includes jQuery. My goal is to: 1) Retrieve the value into a JavaScript variable. 2) Send it as JSON to a server. Here is the form: <div data-role="main" class="ui-content"> <data=role "form" ...

javascriptjqueryhtmlajaxjson

Adjusting the size of images in a Bootstrap lightbox gallery

I am currently working on a website for an artist, making the galleries a key aspect. The website is built using Bootstrap, with the Lightbox for Bootstrap plugin being used for the galleries. Everything seems to be working well in terms of adjusting the i ...

javascripthtmlcsstwitter-bootstrap

Can you modify a specific column in a table using mat-table in Angular material?

For my project, I am utilizing Angular Material's table to present data in a tabular format. However, due to a new requirement, I now need to enable in-line editing for the last 2 columns alongside highlighting another column when the user clicks on t ...

htmlcssangulartypescriptangular-material

Incorporating @font-face webfonts into a Jekyll project

I'm currently working on incorporating webfonts into a Jekyll build. Interestingly enough, the fonts show up perfectly fine when I view them locally, but once I push my project to a live environment, the fonts mysteriously disappear. To make matters w ...

htmlcssfontsjekyllwebfonts

Avoid receiving input for a button that is being covered by another button

I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...

javascripthtmlbuttonparent