Is there a way to create more space between the cards in my project?

Could someone help me with separating the cards in my HTML project? I'm new to coding and struggling with this. The cards are too close together for my liking, is there a way to adjust the spacing?

Below is the code I currently have:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.shell {
  height:65vh;
  justify-content: center;
  display: flex;
  flex-direction: row;
  flex-basis: auto;
  margin: 5px 20px;
  align-items: center; /* Added */
  flex-wrap:wrap;
  
}

.gameshell{
  height:65vh;
  justify-content: center;
  display: flex;
  flex-direction: row;
  flex-basis: auto;
  margin: 5px 20px;
  align-items: center; /* Added */
  flex-wrap:wrap;
}

.card {
  display: inline-block;
  width: 200px;
  height: 160px;
  border: 1px solid #EF9A9A;
  border-radius: 4px;
  margin: 5px;
  text-decoration: none;
}

.card-header {
  color: #D32F2F;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border-bottom: 1px solid #EF9A9A;
  background-color: #FFEBEE;
  padding: 5px 10px;
}

.card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
}

.material-icons {
  font-size: 36px!Important;
  color: #D32F2F;
  margin-bottom: 5px;
}

.main-description {
  color: #D32F2F;
  font-size: 24px;
  text-align: center;
}

.header {
  overflow: hidden;
  background-color: #FFEBEE;
  padding: 20px 10px;
  border-bottom: 1px solid #EF9A9A;
  border-radius: 4px;
}

.header a {
  float: left;
  color: #D32F2F;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: #dfd5d7;
  color: #942626;
}

.header a.active {
  background-color: #D32F2F;
  color: #FFEBEE;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
<!DOCTYPE html>
    <head>
      <link rel="icon" type="png" href="/images/icon.png"/>
      <meta charset="utf-8"/>
      <title>Project-LuLo</title>
      <meta content="width=device-width, initial-scale=1" name="viewport"/>
      <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
<div class="header">
  <a href="#home" class="logo">Project-LuLo</a>
  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#games">Games</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="gameshell">
      <a href="#test"class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
          <a href="#test"class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
          <a href="#test"class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
          <a href="#test"class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
          <a href="#test"class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
          <a href="#test"class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
</div>
    </body>
</html>
htmlcss

Answer №1

Consider eliminating redundant and unnecessary code to streamline your project. To adjust the spacing between div elements, utilize the gap property.

For further information, refer to the documentation here.

  * {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.shell {
  height: 65vh;
  justify-content: center;
  display: flex;
  flex-direction: row;
  flex-basis: auto;
  margin: 5px 20px;
  align-items: center;
  /* Added */
  flex-wrap: wrap;
}

.gameshell {
  height: auto;
  justify-content: center;
  display: flex;
  gap: 1rem;
  /*newly added*/
  margin: 5px 20px;
  align-items: center;
  /* Added */
  flex-wrap: wrap;
}

.card {
  display: inline-block;
  width: 200px;
  height: 160px;
  border: 1px solid #EF9A9A;
  border-radius: 4px;
  margin: 5px;
  text-decoration: none;
}

.card-header {
  color: #D32F2F;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border-bottom: 1px solid #EF9A9A;
  background-color: #FFEBEE;
  padding: 5px 10px;
}

.card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
}

.material-icons {
  font-size: 36px!Important;
  color: #D32F2F;
  margin-bottom: 5px;
}

.main-description {
  color: #D32F2F;
  font-size: 24px;
  text-align: center;
}

.header {
  overflow: hidden;
  background-color: #FFEBEE;
  padding: 20px 10px;
  border-bottom: 1px solid #EF9A9A;
  border-radius: 4px;
}

.header a {
  float: left;
  color: #D32F2F;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: #dfd5d7;
  color: #942626;
}

.header a.active {
  background-color: #D32F2F;
  color: #FFEBEE;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
<div class="header">
  <a href="#home" class="logo">Project-LuLo</a>
  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#games">Games</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="gameshell">
  <a href="#test" class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
  <a href="#test" class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
  <a href="#test" class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
  <a href="#test" class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
  <a href="#test" class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
  <a href="#test" class="card">
    <div class="card-header">place_holder</div>
    <div class="card-main">
      <i class="material-icons">null</i>
      <div class="main-description">place_holder</div>
    </div>
  </a>
</div>

Answer №2

When it comes to creating layouts like this, utilizing the grid system can be really convenient.

However, at present, it seems like you are delving into learning flexbox.

There are different approaches you can take for achieving this.

First: the flexbox method

gap: 10px;

The gap attribute proves to be extremely useful as it does exactly what its name implies by creating space between your flex items, both horizontally and vertically.

Second: the traditional CSS way

.card{
    margin: 10px; //it's actually quite straightforward :)
}

Experiment with using the gap property too (it also works well with grid layouts).

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

Information is not transferring to Bootstrap modal

I attempted to send a value to a modal by following the instructions on the Bootstrap documentation here. However, I am facing an issue where the data is not being successfully passed. To trigger the modal, use the following button: <button type=" ...

javascripthtmltwitter-bootstrapbootstrap-modal

Avoid losing focus on href="#" (preventing the page from scrolling back up to the top)

Is there a way to prevent an empty href link from causing the page to scroll up when clicked? For example, if I have: <a href="#">Hello world</a> And this "Hello world" link is in the middle of the page. When clicked, the URL would look like ...

javascriptjqueryhtmlcss

Fluid percentage-based layout

I have four separate Divs that I would like to position on my page in a specific layout. Here is an image showing how I want them positioned: In the future, I plan to add multiple svg files to Div 4 and I want it to be scrollable. Please note that I only ...

htmlcss

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

javascriptjqueryhtmlcssbootstrap-popover

Using jQuery to smoothly animate a sliding box horizontally

Is there a way to smoothly slide a div left and right using jQuery animation? I have been trying to achieve this by implementing the code below, which can be found in this fiddle. The issue I am facing is that every time I click on the left or right butto ...

javascriptjqueryhtmlcssjquery-animate

Steps for assigning a default attribute to all elements

Let's take a look at this code snippet: <form> <input type="text" required="true"> <input type="text" required="true"> <button type="submit">Click</button> </form> Do you think there is a way to assign a def ...

html

Using CSS selectors in Framework7 Vue allows for precise targeting and styling

I am currently working on developing a Cordova/Phonegap application using vue.js and the Framework7. I have been able to utilize functions like "onClick" by using the "v-on:click="OnClick" attribute within an HTML element. It's worth noting that Frame ...

csscordovadomvue.jshtml-framework-7

What is the process for retrieving the value of the 2nd td by clicking on the checkbox in the 1st td with JavaScript

When I click on "in", I am looking to retrieve the value of "out". This can be easily understood by referring to the image below: The timesheet displayed is generated using an array. All the data is stored in the array and needs to be presented in a table ...

javascriptphpjqueryhtml

Issue with Jquery event not triggering correctly following ajax data retrieval

This script uses jQuery and Ajax to populate a navigation bar with categories and subcategories dynamically. The first unordered list is static, while the second one is populated after receiving data via Ajax. There are some jQuery events that need to be i ...

javascriptphpjqueryhtmlajax

Determining the repetition and placement of background images when employing multiple backgrounds

Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...

cssbackgroundbackground-image

Extracting a value from one HTML element and transferring it to another HTML element's attribute

Is there a way to retrieve the value of an "alt" attribute from an HTML <img> element and then assign it as the value for the "title" attribute in an enclosing <a> tag using PHP? <a title="" href ="page.html"><img src="image.jpg" al ...

phphtml

Show various attachment file names using jQuery

Utilizing jQuery, I've implemented a script to extract the filename from a hidden field and then append it to the filename class in my HTML. filenameCache = $('#example-marketing-material-file-cache').val().replace(/^.*[\\\/ ...

javascriptjqueryhtml

What is the process to create a sticky Material UI grid element?

Currently, I am in the process of developing the front-end for a shopping cart. To organize the content, I have split the container into two columns using Grid container and Grid item. In each column, various components are placed - the left side containin ...

cssreactjsmaterial-ui

What could be the reason for the hover attribute not functioning properly in NextJS

Why isn't my CSS recognizing the hover attribute? Here is my code: I would like the class "mega" to appear when hovering over the li tag. <nav className="mobile-hide"> <ul className="flex-item second-links&quo ...

htmlcssnext.js13

Regular expression that can be used to extract information from a text file by filtering and returning only

When I open a text file, it contains several lines like the examples below. surname australia enter name j.jonhs enter name j.cause enter name f.london enter I am seeking assistance to modify the code snippet below so that it captures the first line m ...

javascripthtml

Saving Style Sheets in a Database

Currently, I am interested in saving CSS data in a mySql database as part of my LAMP setup. My intention is to create an input field that includes the following code: body{ background: url("http://google.com/image.jpg") no-repeat; color: orange; } #someDi ...

phpmysqlcsssecurity

Is there a way to update the input box value with a variable using jquery?

I am currently facing an issue with changing the value attribute of an input box in a form using jquery. Although I am able to change the value, it does not reflect in the outer html. Below is my current code snippet: $("a").click(function(event) { va ...

javascriptjqueryhtmlforms

Setting up Jplayer as an audio player: A step-by-step guide

I am looking to incorporate a Jplayer audio player into my project, but I am struggling to find any documentation or resources that provide instructions on what components to include and how to set it up. If anyone has experience with using the Jplayer au ...

javascriptjqueryhtmlhtml5-audiojplayer

New to the world of web design and seeking answers as to why my style is not being applied

After diligently following the courses on CodeAcademy (I know, kind of lame but it's a start), I finally feel confident in my ability to write my own HTML and CSS code. However, when I tried to do so using Sublime Text 3 and opened my HTML file, I not ...

htmlcss

Solving the Color Change Mystery in Your Dash Application

My goal is to design a sleek black dashboard, so I acquired a CSS stylesheet that should give my dashboard a black theme. Following the instructions, I created an assets folder in the root directory of my app and added my CSS and JavaScript files there. Da ...

pythoncssplotly-dash