Commit f0b5c42d authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung

Enhance card display on small screens

parent 742b355d
......@@ -108,11 +108,7 @@ html {
-ms-transform: scale(0);
transform: scale(0);
font-weight: normal;
/*margin: 15px 0 0 0;
padding: 140px 60px 0px 60px;*/
margin: 10px;
padding: 0px 15px;
}
.hovereffect:hover a.info {
......@@ -138,7 +134,7 @@ html {
.hoverimg {
opacity: 0;
margin: -15px;
margin: -35px;
}
.hoverbtn {
......
......@@ -45,52 +45,53 @@
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="row">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">R&iacute;o Grijalva</h4>
</div>
<div class="card-body">
<div class="hovereffect zoom">
<img class="card-img" src="img/sumidero.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
<span class="photo-credit">Foto: Gabriela L&oacute;pez</span>
<div class="overlay">
<a class="info" href="grijalva/">
<img class="hoverimg mx-auto d-block" src="img/cuenca.png" width="325px">
<span class="btn btn-primary hoverbtn" href="grijalva/" role="button">Visitar
sitio</span>
<br><br>
</a>
<div class="row no-gutters">
<div class="col-sm-6">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">R&iacute;o Grijalva</h4>
</div>
<div class="card-body">
<div class="hovereffect zoom">
<img class="card-img" src="img/sumidero.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
<span class="photo-credit">Foto: Gabriela L&oacute;pez</span>
<div class="overlay">
<a class="info" href="grijalva/">
<img class="hoverimg mx-auto d-block" src="img/cuenca.png" width="100%">
<span class="btn btn-primary hoverbtn" href="grijalva/" role="button">Visitar sitio</span>
<br><br>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-4 shadow-sm">
<span class="github-fork-ribbon left-bottom" data-ribbon="En construcción" title="En construcción">En construcción</span>
<div class="card-header">
<h4 class="my-0 font-weight-normal">Riesgo</h4>
</div>
<div class="card-body">
<div class="hovereffect zoom">
<img class="card-img" src="img/inundacion.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
<span class="photo-credit">Foto: Felinto C&oacute;rdoba</span>
<div class="overlay">
<a class="info" href="riesgos/">
<img class="hoverimg mx-auto d-block" src="img/cuenca.png" width="325px">
<span class="btn btn-primary hoverbtn" href="grijalva/" role="button">Visitar
sitio</span>
<br><br>
</a>
<div class="col-sm-6">
<div class="card mb-4 shadow-sm">
<span class="github-fork-ribbon left-bottom" data-ribbon="En construcción" title="En construcción">En construcción</span>
<div class="card-header">
<h4 class="my-0 font-weight-normal">Riesgo</h4>
</div>
<div class="card-body">
<div class="hovereffect zoom">
<img class="card-img" src="img/inundacion.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
<span class="photo-credit">Foto: Felinto C&oacute;rdoba</span>
<div class="overlay">
<a class="info" href="riesgos/">
<img class="hoverimg mx-auto d-block" src="img/cuenca.png" width="100%">
<span class="btn btn-primary hoverbtn" href="grijalva/" role="button">Visitar sitio</span>
<br><br>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-6">
<div class="row no-gutters justify-content-md-center">
<div class="col-sm-6">
<div class="card mb-4 shadow-sm">
<span class="github-fork-ribbon left-bottom" data-ribbon="En construcción" title="En construcción">En construcción</span>
<div class="card-header">
......@@ -102,16 +103,14 @@
<span class="photo-credit">Foto: Lucy Nieto</span>
<div class="overlay">
<a class="info" href="centropais/">
<img class="hoverimg mx-auto d-block" src="img/cmcp.png" width="325px">
<span class="btn btn-primary hoverbtn" href="centropais/" role="button">Visitar
sitio</span>
<img class="hoverimg mx-auto d-block" src="img/cmcp.png" width="100%">
<span class="btn btn-primary hoverbtn" href="centropais/" role="button">Visitar sitio</span>
<br><br>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment