Show information in a horizontal layout, but switch to a stacked arrangement if the screen is too narrow

Is there an optimal way to arrange content side by side when the width allows, like this:

[content] [content] [content] [content]

If the screen becomes too small, should the content automatically stack like this:

[content]

[content]

[content]

I am looking for a simple solution that does not require loading frameworks like Bootstrap. My content uses jQuery if that helps.

My mobile HTML site needs to be responsive and look good on various screen sizes, including tablets and desktop computers. The content is organized in div elements.

An ideal scenario would be for it to display as follows initially:

[content] [content]

[content] [content]

javascriptjqueryhtmlcss

Answer №1

Are you interested in achieving this behavior?

If so, the css property float is what you need to focus on.

View Demo

Answer №2

To achieve that, you'll have to employ media queries.

Search online for CSS Media Queries

Answer №3

There are a couple of ways you can achieve this:

a) Utilize the min-width property along with float:left

The min-width property ensures that your div does not shrink below a specified size, while float left allows the div element to move up if there is space available.


        <html>
         <head>
         <style type='text/css'>
         body{
          width:100%;
          height:100%;

         }
         body div{
          float:left;
          width:33%;
          height:200px;
          min-width:200px; 
         }
            .width1{
             background-color:red;
            }
            .width2{
             background-color:green;
            }
            .width3{
             background-color:blue;
            }
         </style>

         <body>


           <div class="width1"></div>
           <div class="width2"></div>
           <div class="width3"></div>

         </body>

         </html>

b) Another, more efficient method would be to use media queries


        <html>
         <head>
          <style type='text/css'>
         body{
          width:100%;
          height:100%;

         }
         body div{
          float:left;
          width:33%;
          height:200px;
         }
            .width1{
             background-color:red;
            }
            .width2{
             background-color:green;
            }
            .width3{
             background-color:blue;
            }

         @media only screen and (max-width: 800px) { /* for 640px screen set size of div to 50%; */
          body div{
           width:50%;
          }
         }

          @media only screen and (max-width: 480px) { /* for smaller screen set size of div to 100%; */
          body div{
           width:100%;
          }
         }
         </style>

         <body>


           <div class="width1"></div>
           <div class="width2"></div>
           <div class="width3"></div>

         </body>

         </html>

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

jQuery AJAX call in Cordova timing out unexpectedly at 30-second mark, ignoring custom timeout configuration

Attempting to run the following function on my Android device to sync with an IoT device I've created: function NewDeviceFetchDeviceID(){ strURL = "https://192.168.x.x/....."; return $.ajax({ url: strURL, type: 'GET&apos ...

androidjqueryajaxcordova

Discovering the hovered time value on an input range slider

I realize that my question may have been a bit unclear, so I will provide a detailed explanation here. I am currently working on creating a simple video player for a webpage. I am using an input range element to display the file duration and current time, ...

javascriptjquery

Update a user's role through an ajax button within a user list

In my webpage, I have a customer list being displayed using a loop <?php foreach ($customers as $user){ ... }; ?> Next to each user, there is a "Change role" link that appears in a loop I've implemented an A ...

phpjqueryajaxwordpressroles

Monitor changes in the select tag to display the updated value and output

I am new to using jQuery. While I have practiced using native PHP Ajax in the past, I now recognize the need to learn jQuery due to current technological advancements and demands. When the select tag changes, I send the "types" value via POST method to a ...

javascriptphpjqueryajax

Vue fails to receive updates from Firestore until the page is manually refreshed

I set out to develop a task tracker app using Vue. As I neared completion of the project, I encountered an issue - when adding a new task, it would not change the reminder status unless I reloaded the page. Here is the code snippet from my Home.vue file: & ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Guide to Utilizing Roboto Light/Thin Font from Google Fonts on Chrome

I'm struggling with using the Roboto fonts in Chrome, specifically with getting Condensed and Thin/Light font weights. I have downloaded all three complete fonts: @import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic, ...

cssgoogle-chromefonts

What causes req.body to display as an empty object in the console during a POST request?

Having some trouble with my code. The middleware is supposed to return parsed data in the console as an object accessed by req.body, but it keeps returning an empty object for some reason. Check out Code and Console Snapshot 1 View Code and Console Snapsh ...

javascriptnode.jsexpresshttp-posthttprequest

AngularJS - How to loop through a div to display all items

I am working with AngularJS to create a repeatable shopping cart items feature. Below is a sample JSON data structure: [{"src": "img/T1.jpg", "itemname": "solid green cotton tshirt", "style": "MS13KT1906", "colour": "Blue", "size": "s", "qty": "1", "price ...

htmlangularjs

Angular 7 - Implementing periodic JSON data retrieval from server and maintaining local storage within Angular application

Seeking guidance on how to handle updating a static json file stored in the assets directory in an Angular 7 project. The goal is to periodically fetch a json from a server, check for updates, and perform post-processing on the data in the static file (ess ...

javascriptangulartypescript

What causes the discrepancy between 1px and 0px padding on floating divs in various web browsers?

Take a look at this HTML example - the only variation is padding-top:0px; vs padding-top:1px; However, in the second example, the div is shifted by a completely different amount? <div style="clear: both; margin:0px; padding-top:0px; border: 0px"> ...

htmlcss

Discover the method for obtaining a selected element in a bootstrap dropdown that is dynamically populated

Similar to the question asked on Stack Overflow about how to display the selected item in a Bootstrap button dropdown title, the difference here is that the dropdown list is populated through an ajax response. The issue arises when trying to handle click ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Is there a way to successfully submit a form in PHP once it has been validated using JavaScript?

I'm interested in creating a register/login system. I've set up a form in Register.php and handled the validation part in JavaScript, but I'm encountering an issue where no values are being sent to the database upon clicking submit. Registe ...

javascriptphpajaxformsbackend

Leverage Angular's constant feature in scenarios that extend beyond the

Even though it may not be recommended, I find it fascinating to use Angular services outside of the angular framework. One example is having .constant('APIprefix','/api') I am curious about how to access the value of APIprefix outside ...

javascriptangularjs

Transmit a PHP reply to an AJAX request

Here's the conclusion of my PHP script: if ($success) { $result = array('success' => true); } else { $result = array('success' => false, 'message' => 'Something happened'); header($_SERVER ...

phpjqueryajaxreturn

Steps to retrieve a base64 image using Cordova's FileTransfer feature

Recently, I encountered an issue with downloading base-64 images using the Cordova file transfer protocol. When I tried to provide a remote server path like "", the download worked perfectly. However, when I attempted to use a base-64 image path for the fi ...

javascriptasp.netcordovabase64telerik-appbuilder

Issue with data interpretation between jQuery and Java

My character encoding is currently set to ISO-8859-1. I'm utilizing an AJAX call with jQuery.ajax to communicate with a servlet. After serialization by jQuery, the URL appears as follows: https://myurl.com/countryAndProvinceCodeServlet?action=getPro ...

javajqueryajaxcharacter-encoding

What methods can be used to add a delay to a toggleClass event in order to prevent rapid

After implementing the jQueryUI toggleClass delay function, I noticed that it introduces a delay before the event occurs instead of setting a specific timing for when it can be triggered again. I have multiple DIVs that switch classes when hovered over us ...

javascriptjqueryhtmlcss

Ways to eliminate the unusual dashed space in ReactJS using Bootstrap

While developing an app with NextJS and Bootstrap, I noticed a strange dashed gap at the top of the screen in the elements tab. Despite checking for margin or padding-top properties on any element, there doesn't seem to be a clear cause for this issue ...

javascripthtmlcssreactjsnext.js

What are the steps to deactivate react-number-format input?

Is there a way to deactivate input for the react-number-format component even though it doesn't have a built-in disabled property? ...

javascriptreactjsreact-number-format

Different ways to generate DOM element using jQuery

When it comes to creating a new DOM element from JavaScript or jQuery code, there are numerous methods to consider. Some examples include: $('<div>').prop('id','someid').addClass('someclass'); $('<div& ...

javascriptjqueryhtmldom