Strategies for minimizing the amount of columns in a responsive design

I am currently attempting to adjust the number of columns displayed on a mobile device from one column to two. Despite trying various solutions suggested by others, none of them seem to work for me. I suspect that my usage of flex may be causing the issue. 

.wrapper {
   display:flex;
   flex-wrap: wrap;
   padding:30px 20px;
   margin-bottom:10px;
} 


.box {
    border:1px solid red; 
    padding:0 20px;
    margin-left:10px;
}
<div class="wrapper">
  <div class="box">Text 1</div>
  <div class="box">Text 2</div>
  <div class="box">Text 3</div>
  <div class="box">Text 4</div>
  <div class="box">Text 5</div>
</div>

For reference, my JSFiddle is available. The box class serves as an example to demonstrate the issue at hand. When resizing the window, all boxes end up in a single column. Can someone provide guidance on how to maintain a two-column layout?

cssflexboxmultiple-columns

Answer №1

If you want to make your website more responsive, consider using media queries to adjust the padding on the left and right. Here's an example:

@media screen and (max-width:500px){
 .wrapper {
     padding:30px 10px;
    } 
 .box {padding:0 10px;}
}

Hopefully this solution works for you! If there's anything else you need help with, just let me know. You can also learn more about media queries by visiting this link.

Thank you!

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 I prevent a nested Table from inheriting the style of the parent table?

Just to clarify, I'm not using tables or any other styling methods like that on my page. I have a simple table that lists services, prices, and PayPal buttons for adding to the cart. While everything is functioning properly and looks good, there are ...

csscss-tables

Tips for defining conditions within the style attribute in JSP

Below is the code that I attempted: <div style="width:85%;"> <input class="formbutt" value="AddNew" title="AddNew" type="button" style="{(${projectEnvironmentBean.divStyle}=='dipslay:none') ? 'display:block' :'display: ...

cssjspjpa

Using AngularJS to dynamically apply a CSS class to message text depending on the HTTP post response

I am looking to implement a method for adding a CSS class to the text color of a message based on the response. Currently, I achieve this by: if (response.data.status == 201) { angular.element(document.getElementById("msg")).addClass("text-green"); ...

javascriptcssangularjs

What is the inner workings of CSS?

I'm curious about the inner workings of CSS. Does the HTML get interpreted before CSS, or vice versa? Or does it all apply as soon as the browser has constructed the DOM? I would appreciate a detailed explanation on this topic. ...

css

Is it possible to stack navbar items in CSS?

I'm facing an issue with my navbar menu items overlapping on top of each other. https://i.sstatic.net/dEEpx.png What could be the reason behind this? Codepen Link: https://codepen.io/ogonzales/pen/mdeNNLB Code Snippet: <nav class="navbar navb ...

htmlcss

Arrange your grid system with Bootstrap Vue

There is a dataset retrieved from an API, and each item will be displayed within a div using a v-for loop. The desired layout for the grid of divs is as follows: [-- item 1 --][-- item-2 --] [-- item 3 --][-- item-4 --] [-- item 5 --][-- item-6 --] [-- ite ...

htmlcssvue.jsbootstrap-4css-grid

Avoiding label overlap with JavaScript

I've mapped a textured image onto a sphere and added labels to it, but some of the labels are overlapping. I'm looking for ways to separate them without altering the "lon" and "lat" values. Could someone please advise me on how to achieve this or ...

javascriptcssmaththree.js

There is an unnecessary gap between the parent div and the image contained within it

Snippet of HTML code showcased below: <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="style ...

htmlcss

Managing Positioning of PHP Print Statement

Recently, I developed a PHP script for my site that facilitates user registration and login specifically for membership purposes. If a user successfully logs in, the script redirects them to a landing page for members. However, if the login fails, the scri ...

phphtmlcsssqlecho

Utilizing the dynamic flair with React's map functionality

In my display area, which is a div element, I have rendered some text using spans. I utilized the map function to render the text from an array. The issue arises when I apply a color class to the span elements within the map function, causing all text to ...

javascripthtmlcssreactjsdictionary

Exploring the bond between siblings from a child's perspective

Is there a way to apply styling to the .item class when the corresponding input field is checked? <input> <span class="item"> I have discovered that I can achieve this using input:checked ~ .item {} However, my challenge lies in obtaining th ...

csscss-selectors

Bootstrap alert JS refuses to slide down

Here is the JavaScript code to make a blue bar slide down on click: $('#comment').click(function(e) { e.preventDefault(); $('#comment').slideDown(); }); ...

javascriptjqueryhtmlcsstwitter-bootstrap

Styling the Container Component in ReactJS

I need to apply some styling to the "Forms_formline__3DRaL" div (shown below). This div is generated by a component, but it seems that the style I want to add is being applied to the input instead of its parent div. How can I use ReactJS to set the style " ...

cssreactjsnext.js

Unable to apply border-radius to a specific HTML table

I am facing an issue where the border-radius is not being displayed on a specific HTML table. I am having difficulty in applying rounded corners to the entire table so that the table edges have a 30px curve. Here is an example of what I am looking for: ht ...

htmlcss

Div positioned absolutely beneath the footer

I'm facing an issue where the footer field I add under a div with an absolute value escapes on both mobile and desktop. Additionally, the iframe does not have full height. Any suggestions on what I should do? All the specifics are provided in the att ...

htmlcssfooterabsolute

What is the best way to include a colored square before multiple items on a list?

Is there a way to customize list items with colored squares before the text? I've been searching for a solution, but haven't found it yet: http://www.w3schools.com/cssref/pr_list-style-type.asp Although they don't necessarily need to be l ...

htmlcss

Scrolling within ion-content is fluid when using a fixed div in Ionic

Following the recent GoogleChrome update, a div set to 'fixed' is now scrolling with the rest of the page. For a demonstration, you can visit the following link: LINK Specifically, the issue occurs with a 'fixed' div placed inside the ...

htmlcssgoogle-chromeionic-frameworkionic3

What is the best way to format the JQGrid table for better

Is there a way to indent the table in this example and create white space on the side of the rows and header? I want a white margin on the left of everything below "Stackoverflow example". I'm hoping to achieve this using only CSS. Below is the code ...

cssjqgrid

Enhancing your website with a touch of elegance: horizontal scrolling

I am looking to incorporate an inset shadow to visually indicate that there is additional content available for scrolling. For a clearer understanding, here is a sketch: https://i.sstatic.net/odMPd.jpg Currently, I am utilizing Bootstrap framework for th ...

cssmobilebootstrap-4

Div splits into two when positioned absolutely

Currently, I am playing around with Bootstrap 4 and have a card nested inside a card-columns: <div class="card-columns"> <div class="card"> <div class="card-block"> <h4 class="card-title">iPhone 5S</h4> ...

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4