What's the best way to increase vertical spacing between elements within a <div> when viewed on mobile devices?

Presently, I have designed a <div> that adjusts according to screen size.

For wider screens:

https://i.sstatic.net/0X6tq.png

On mobile screens:

https://i.sstatic.net/mYZxE.png

I am looking to create vertical spacing between the two rows on mobile screens. I've attempted adding margins to individual elements, but I don't want the second row to have a margin-bottom.

https://i.sstatic.net/mpqfo.png

The code I'm working with is shown below:

HTML

<div class="stats-flexwrap">
    <div class="stats">
        <span class="stats-row"><span>element 1</span>
        <span class="stats-row"><span>element 2</span>
        <span class="stats-row"><span>element 3</span>
        <span class="stats-row"><span>element 4</span>
     </div>
 </div>

CSS

.stats-row {
    text-align: center;
    margin: 0 16px;
}

.stats {
    width: auto;
    display: flex;
}

@media screen and (max-width: 788px) {
    .stats {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        margin: 0;
        height: auto;
    }
    
    .stats-row {
        margin: 0 16px 0 16px !important;
        width: 120px;
    }
}

.stats-flexwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
htmlcssflexbox

Answer №1

To achieve this layout using flex-box, apply a margin-bottom to the first child of the flex-container.

.stats-row {
  text-align: center;
  margin: 0 16px;
}

.stats {
  width: auto;
  flex-wrap: wrap;
  display: flex;
}

@media screen and (max-width: 788px) {
  .stats {
    justify-content: center;
  }
  .stats-row {
    width: 120px;
  }
  .stats *:nth-child(1) {
    margin-bottom: 10px;
  }
}


.stats-flexwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
<div class="stats-flexwrap">
  <div class="stats">
    <span class="stats-row">element 1</span>
    <span class="stats-row">element 2</span>
    <span class="stats-row">element 3</span>
    <span class="stats-row">element 4</span>
  </div>
</div>

However, it is recommended to use CSS Grid for better vertical spacing control.

With CSS Grid:

Explore more CSS Grid features through resources like CSS-Tricks guide. You can temporarily stick with flexbox with caution until transitioning to CSS Grid.

Answer №2

Utilize the gap property for creating spacing within a grid:

gap: 25px;


.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer №3

To easily add vertical margin, you can utilize the nth-child() selectors for styling different elements. You have the flexibility to choose any numbers for margins; for instance, I've applied margin: 0 10px 20px 10px; on element 2 and margin: 0 10px 0 10px; on element 4. Notably, I only added margin-bottom to element 2.

.container {
  display: flex;
  justify-content: space-around;
}

@media(max-width: 768px) {
  .container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .box:nth-child(2) {
    margin: 0 10px 20px 10px;
  }
  .box:nth-child(4) {
    margin: 0 10px 0 10px;
  }
}
<div class="container">
  <div class="box">element 1</div>
  <div class="box">element 2 </div>
  <div class="box">element 3</div>
  <div class="box">element 4</div>
</div>

If this approach still doesn't produce the desired result, feel free to reach out for further assistance.

Answer №4

You have the option to include margin-bottom using the margin-bottom property for a specific element.

HTML:

<div class="stats-flexwrap">
<div class="stats">
    <span class="stats-row"><span class="**ele_1**">element 1</span>
    <span class="stats-row"><span class="**ele_2**">element 2</span>
    <span class="stats-row"><span>element 3</span>
    <span class="stats-row"><span>element 4</span>``
</div>
</div>

CSS:

**.ele_1{
   margin-bottom:8%;
      }
.ele_2{
   margin-bottom:8%;
      }**


.stats-row {
text-align: center;
margin: 0 16px;
           }

.stats {
width: auto;
display: flex;
       }

@media screen and (max-width: 788px) {

.stats {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin: 0;
    height: auto;
}

.stats-row {
    margin: 0 16px 0 16px !important;
    width: 120px;
    }
  }

.stats-flexwrap {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
  }

Answer №5

If you're looking to create some extra space between lines, one simple method is to utilize the <br> tag. For a more customized approach, consider adjusting the line-height property in your CSS.

.line-spacing {
    line-height: 1.5;
}

<p class="line-spacing">
    This is the first line.
</p>
<p class="line-spacing">
    This is another line.
</p>

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

Tips for enabling scrolling for a specific div while disabling scrolling for the entire page

Can the page's scrolling be deactivated while still allowing scrolling for a specific div within the page? ...

cssscroll

Tips for making a table have the same width as its child td elements and enabling the table to exceed the width of the viewport

I am facing a challenge with a table that has dynamically changing rows and columns. <table> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> <tr> <td> ...

javascriptjqueryhtmlcss

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

What might be causing the button switch case JavaScript functionality to not work properly?

In my Worklight project, I have a code snippet that is supposed to capture the value of a button that a user clicks on and then display that value in a label. However, when I run the project, none of the other functions I have defined seem to work. Strange ...

javascriptjqueryhtmlibm-mobilefirst

Is there a way to include two functions within a single ng-click event?

Is it possible to incorporate two functions in a single ng-click event? Below is the code snippet: <button class="cButtonSpeichern" ng-click="saveUser()">Speichern</button> In addition, I would like to include this function as well. alert ...

javascriptangularjshtml

The HTML webpage is optimized for desktop and tablet viewing, but has difficulty displaying correctly on mobile phones

Just starting out with HTML and created a website using HTML and CSS that is now live. It looks good on desktop and tablet (iPad) but not so great on mobile devices. Tried different solutions, including viewport settings, to fix the issue with no success. ...

htmlcssmobile

WordPress - Unique custom fields & Identification Classes

Can anyone provide guidance on how to assign a class to custom fields in Wordpress? I want to apply custom CSS to multiple custom fields but am struggling to give them individual classes. ...

csswordpresscontent-management-systemfield

Ensure consistent element heights within adjacent columns using CSS

My template looks like this: https://i.sstatic.net/hoLzR.jpg I am trying to keep the same height between each item in both columns, where the height is determined by the tallest item in each column when they are placed side by side. But on smaller screen ...

htmlcssflexbox

Limit selection choices in select element

Similar Question: Prevent select dropdown from opening in FireFox and Opera In my HTML file, I have a select tag that I want to use to open my own table when clicked. However, the window of the Select tag also opens, which is not desirable. Is there a ...

javascripthtmlselect

How can I determine if a user has reached the end of a non-scrollable div by utilizing HostListener and directives within Angular?

In my Angular project, I have designed a main layout using flex display with specific height and overflow settings. The main content div inside this layout has its own unique styling to ensure consistent appearance for any components inserted within it. By ...

htmlangularscrollangular2-directives

Tips for successfully sending a nested function to an HTML button and dropdown menu

I'm working on two main functions - getChart() and fetchData(). The goal is to retrieve chart data and x/y axes information from a database. Within the getChart function, I'd like to incorporate a dropdown menu for displaying different types of c ...

javascripthtmljquerycsschart.js

Utilizing numbered lists through HTML, CSS, and/or JavaScript

I am looking to accomplish something similar to this... My guess is that the images should be stored in an array in Javascript with the image links. However, I am uncertain if this can be done using only HTML and CSS. I found a solution on this thread, w ...

javascripthtmlcsshtml-lists

Angular animation will be triggered when the user clicks using ng-click

In my Angular project, I'm looking to implement an animation that will enlarge the size of an image. Below is the code snippet: <div class="card"> <div class="item images-parent"> <img src="img/carryout-icon.jpg" class="left-image" ...

cssangularjs

Widget being affected by centering CSS styling

My CSS centering code seems to be causing an issue with a widget, as it gets pushed down below the columns. Additionally, the nav bar widget appears on all forum pages. Your assistance in resolving this problem would be greatly appreciated. Thank you. Ch ...

htmlcss

Having trouble changing the Font Awesome icon on click?

I'm struggling to figure out why I can't change a font awesome icon using a toggle. I've tried various solutions but nothing seems to be working. Any insights on what might be causing this issue? (HTML) <span class="toggle-icon" ...

javascripthtmlcssfont-awesome

I keep encountering an issue with getJson

A snippet of my JavaScript code retrieves a JSON object from a URL. Here is the portion of the code in question: <script> $(document).ready(function(){ $("button").click(function(){ $.getJSON('url_address', {}, function(data) { ...

javascriptjqueryhtmljson

Establishing a connection between an Express server and a MariaDB database

Currently, I am working on creating a simple login webpage without any security measures. The setup includes an OpenSuse server with a mariadb database, an Express server, and an HTML file for the client. Express Server: const mariadb = require('mari ...

htmlnode.jsexpresspostmariadb

Is there a way to ensure that the Bootstrap toggle starts off in a collapsed state?

I need assistance with creating a toggle feature where clicking on a line of text will reveal more text below, and when clicked again, the extra text collapses. I want the text color to change to blue when collapsed and red when expanded. The only issue is ...

csstwitter-bootstrapbootstrap-4toggle

Align three out of seven items in the navbar to the right using Bootstrap 4.1

Bootstrap 4.1 offers a great way to create a Navbar with multiple menu items, but I'm struggling to right justify three specific menu items within the Navbar. I've tried different methods, including using align-self-end, justify-content-end, and ...

htmlcssbootstrap-4

What is the best method to determine the accurate height of a window that works across all browsers and platforms?

Is there a way to accurately determine the visible height of the browser window, taking into consideration any floating navigation bars or bottom buttons that may interfere with the actual viewing area? For example, mobile browsers often have floating bar ...

javascriptjqueryhtmlcssbootstrap-modal