I would like to know how I can create a gap between my two rows without it creating a 'double gap' in mobile. At the moment I've added a
between the rows in the html. And this works fine in desktop view. But when I view it in mobile, it creates a sort of double gap between the third and fourth 'cards'. Does anyone know of another solution to this? I've tried fiddling with row-gap, but that did nothing (I'm not even sure it's appropriate in this case since this is not a grid).
<div >
<div >
<div >Get a<br />
part-time job</div>
</div>
<div >
<div >Join a club<br />
or society</div>
</div>
<div >
<div >Find out<br />
about volunteering</div>
</div>
</div>
<br>
<div >
<div >
<div >Participate in<br />
Melbourne Plus activities</div>
</div>
<div >
<div >Explore the LMS</div>
</div>
</div>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float 3 columns side by side */
.column {
float: left;
width: 33.33%;
padding: 0 10px;
}
/* Float 2 columns side by side */
.column2 {
float: left;
width: 50%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the counter cards */
.card {
/* this adds the "card" effect */
padding: 16px;
text-align: center;
background-color: #f1f1f1;
border-top: 4px solid #ee8889;
}
.card:hover {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
padding: 16px;
text-align: center;
font-weight: bold;
background-color: #f1f1f1;
border: 3px solid #ee8889;
transition: 0.3s;
}
/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
gap-row: 10px;
}
.column2 {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
Any help would be greatly appreciated. Thank you,
Maria
CodePudding user response：
I know I'm late but if you look at your html you added a break, and then in your css you used margin-bottom. So between using the break and margin-bottom you created two spaces. Delete the break in your html between the two row divs, then adjust margins top/bottom to fit your expectations.
CodePudding user response：
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th {
background-color:green;
Color:white;
}
th, td {
width:150px;
text-align:center;
border:1px solid black;
padding:5px
}
.geeks {
border-right:hidden;
}
.gfg {
border-collapse:separate;
border-spacing:0 15px;
}
h1 {
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>Row spacing in a table</h2>
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</table>
<table class = "gfg">
<tr>
<td class = "geeks">10001</td>
<td>Thomas</td>
<td>M</td>
<td>32</td>
</tr>
<tr>
<td class = "geeks">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
</table>
</center>
</body>