Hoe krijg ik meer ruimte tussen de "cards" in css3?
Hieronder zie je een voorbeeld van de css die ik wil gebruiken.
Als ik w3-card-8 gebruik overlapt de schaduw met de card ernaast.
Ik wil ook wel dat de pagina responsive is.
Hieronder zie je een voorbeeld van de css die ik wil gebruiken.
Als ik w3-card-8 gebruik overlapt de schaduw met de card ernaast.
Ik wil ook wel dat de pagina responsive is.
HTML:
<head>
<meta charset="utf-8" />
<title>testcards</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="page-container">
<div id="row-1" class="w3-row w3-container">
<div class="w3-padding w3-card-2 w3-center w3-third w3-container">
<a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
<div class="w3-container">
<h4>
<span class="w3-large w3-text-black">moon A</span>
</h4>
</div>
</div>
<div class="w3-padding w3-card-2 w3-center w3-third w3-container">
<a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
<div class="w3-container">
<h4>
<span class="w3-large w3-text-black">moon B</span>
</h4>
</div>
</div>
<div class="w3-padding w3-card-2 w3-center w3-third w3-container">
<a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
<div class="w3-container">
<h4>
<span class="w3-large w3-text-black">moon C</span>
</h4>
</div>
</div>
</div>
<div id="row-1" class="w3-row w3-container">
<div class="w3-padding w3-card-2 w3-center w3-third w3-container">
<a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
<div class="w3-container">
<h4>
<span class="w3-large w3-text-black">moon A</span>
</h4>
</div>
</div>
<div class="w3-padding w3-card-2 w3-center w3-third w3-container">
<a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
<div class="w3-container">
<h4>
<span class="w3-large w3-text-black">moon B</span>
</h4>
</div>
</div>
<div class="w3-padding w3-card-2 w3-center w3-third w3-container">
<a href="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" rel="popup fullScreen"><img src="http://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" style="width:100%"></a>
<div class="w3-container">
<h4>
<span class="w3-large w3-text-black">moon C</span>
</h4>
</div>
</div>
</div>
</div>
</body>