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

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

javascriptjqueryhtmlcss

Activating the Play button to start streaming a link

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across ...

javascripthtmlangularionic4

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Looking for recommendations on how to create an Android web application using HTML, CSS, and JavaScript. Any suggestions? ...

javascriptandroidhtmlcssweb-applications

How can you utilize CSS grid to position an alternate symbol alongside ordinary text?

Does anyone have suggestions on how to align an "alt symbol" with "regular text"? I'm struggling to center both elements without resorting to hacky solutions. Currently, I am using CSS grid, but I am open to exploring other solutions that are easy an ...

htmlcsscss-gridcentering

Is it possible to implement a code that will organize a dropdown list alphabetically?

Could someone assist me in sorting the location items alphabetically in this search form at: I would like the locations to be displayed in alphabetical order. Any help with updating the code below would be greatly appreciated. Here is the current code sn ...

phphtmlwordpressformssorting

How to retrieve information from a pre-populated <textarea> using Google Maps script in AngularJS

Is there a way to transfer data from a prefilled <textarea> that is populated by accessing the Google Maps API in a JavaScript script, into an AngularJS controller? $scope.Add=function(msg){ $log.log(msg) } <div ng-app=""> <div ng-contro ...

htmlangularjsgoogle-mapsangular-promiseangularjs-service

Media queries for aspect ratios across all browsers

I have been exploring ways to modify background-size from 'contain' to 'cover' using media queries when the browser width results in an aspect ratio of less than 4:3. This adjustment creates a background image that may not be fully vis ...

cssmedia-queriesaspect-ratio

Choosing the initial hyperlink provided by a search engine like Google

While examining the google search website, I can easily locate my desired href by searching for //div[@class="r"]/a/@href using the finder tool. However, when I attempt to access it with scrapy using response.xpath('//div[@class="r"]/a/@href'), I ...

pythonhtmlweb-scrapingscrapy

Ensuring jQuery ajax requests can still be made when clicking on various links

After successfully creating code for ajax requests and fetching information from the server, I encountered an issue where clicking a link would smoothly transition me to a new page without refreshing the header and footer. However, upon clicking another li ...

jqueryhtmlexpressonclick

Align the last column to the right side using HTML

I am facing an issue with my current project. I have a page that displays a list of posts in a CSS grid. The last two columns of the grid are supposed to be right-aligned, but for some reason, it's not working as expected. Here is the snippet of the c ...

htmlcssangular

Values do not appear as expected post PDF conversion using wkhtmltopdf

Currently, I am updating certain values within my HTML page by following this process: The function: function modifyContent(){ var newTitle = document.getElementById('myTextField1').value; if( newTitle.length==0 ){ alert('Plea ...

javascriptphphtmlpdfwkhtmltopdf

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

javascripthtmlangularjs

Ways to avoid single-sided border from overlapping with border radius

When adding a 2px bottom border to a text field with a 4px corner radius on the container, the border tends to curl around the edge due to the larger radius. I am looking for a solution to keep the bottom edge flat. [What I DON'T want: border wrappin ...

cssborder

Tips for fading the text of list items when their checkbox is marked as done?

I am trying to figure out how to gray out a list item when its checkbox is checked. The code I currently have takes text input from a textbox and adds it to an unordered list when the add button is clicked. Each list item contains a checkbox within it. My ...

javascripthtmlcss

Error in Reactive Form: Null Property Reading Issue

Issue: Encountered a Cannot read property errors of null error in the form group. I have implemented a reactive form with validation, but I keep running into this specific error. Here is the complete form control setup: <div class="container mt- ...

htmlangularangular-reactive-forms

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

javascriptjqueryhtmlgoogle-chrome-extensionweb-applications

The onclick event in JavaScript is unresponsive on mobile devices

Our website is powered by Opencart 1.5.6.4 and the code snippet below is used to add items to the shopping cart. <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?&g ...

javascripthtmlonclickopencart

Creating a dynamic hyperlink variable that updates based on user input

I am attempting to create a dynamic mailto: link that changes based on user input from a text field and button click. I have successfully achieved this without using the href attribute, but I am encountering issues when trying to set it with the href attr ...

javascripthtmljqueryinputhref

Tips for capturing the interaction between a jQuery Dialog and its Parent

Within the parent HTML, there is a call that triggers a JavaScript function. <div class="data"> <form:input title="Building" styleClass="content contractorDisable" maxlength="5" size="6" path="fireImpairForm.bldCode" />&nbsp; <a hre ...

javascriptjqueryhtmljsp

Delete a designated section from a URL with the power of jQuery

I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...

javascriptjqueryhtml