0

me podrían ayudar? trato de entender css3 y quisiera saber como puedo hacer para arreglar la vista responsive.

aquí les dejo mi código.

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body{
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
}
body h1{
	text-align: center;
	margin-bottom: -5%;
}
.contenedor{
	position: relative;
	width: 1000px;
	margin: 150px auto 0;
	height: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 440px;
	grid-gap: 40px; 
}
.contenedor .card{
	position: relative;
	background: #000;
	 overflow: hidden; 
	border-radius: 10px;
	transition: 0.5s;

}
.contenedor .card:hover{
	transform: translateY(-20px);
	box-shadow: 0 20px 20px rgba(0,0,0,.2);
}
.contenedor .card .img-box{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.5s;
}
.contenedor .card:hover .img-box{
	opacity: 0.5;
}
.contenedor .card .img-box img{
	width: 100%;
}
.contenedor .card .content{
	position: absolute;
	width: 100%;
	height: 60%;
	bottom: -100%;
	padding: 20px;
	padding-top: 60px;
	box-sizing: border-box;
	text-align: center;	
	transition: 0.5s;
}
.contenedor .card:hover .content{
	bottom: 0;
}
/*Aca estan los hermanos... Importante cambiar si solo se quiere 1*/
.contenedor .card:nth-child(1) .content{
	background: linear-gradient(0deg, #0075F2, transparent);
}
.contenedor .card:nth-child(2) .content{
	background: linear-gradient(0deg, #30F200, transparent);
}
.contenedor .card:nth-child(3) .content{
	background: linear-gradient(0deg, #EE00F2, transparent);
}
.contenedor .card .content h2{
	margin: 0 0 10px;
	padding: 0;
	color: #fff;
	font-size: 20px;	
}
.contenedor .card .content h2 span{
	color: #ffeb3b;
	font-size: 15px;
}
.contenedor .card .content p{
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 15px;	
}
.contenedor .card .content ul{
	display: flex;
	margin: 20px 0 0;
	padding: 0;
	align-items: center;
	justify-content: center;
}
.contenedor .card .content ul li{
	list-style: none;
}
.contenedor .card .content ul li a{
	color: #fff;
	padding: 0 10px;
	font-size: 18px;
	transition: 0.5s;
}

@media screen and (max-width: 999px) {
	.contenedor{
		width: 100%;
	}
	.contenedor .card .img-box{
		width: 100%;
		height: 100%;
	}
	.contenedor .card .img-box img{
		width: 100%;
	}
	.contenedor .card .content{
		width: 100%;
		height: 60%;
		bottom: -100%;
		padding: 0;
	}
}
<body>
	<h1>Targeta de Presentación</h1>
	<div class="contenedor">
		<div class="card">
			<div class="img-box">
				<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg" alt="">
			</div>
			<div class="content">
				<h2>Carlos Zalazar <br><span>UX/UI Desinger</span></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, voluptatibus officiis debitis delectus enim expedita.</p>
				
				<ul>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
				</ul>
			</div>
		</div>
		<div class="card">
			<div class="img-box">
				<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/9.jpg" alt="">
			</div>
			<div class="content">
				<h2>Carlos Zalazar <br><span>UX/UI Desinger</span></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, voluptatibus officiis debitis delectus enim expedita.</p>
				
				<ul>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
				</ul>
			</div>
		</div>
		<div class="card">
			<div class="img-box">
				<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg" alt="">
			</div>
			<div class="content">
				<h2>Carlos Zalazar <br><span>UX/UI Desinger</span></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, voluptatibus officiis debitis delectus enim expedita.</p>
				
				<ul>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
</body>

2
  • Pues a simple vista es responsiva, ¿Cuál es el comportamiento que deseas, o cual es la falla que presenta? el 27 feb. 2019 a las 21:49
  • @JheymanMejia ejecutaste el código que puse? al ejecutarlo me gustaría que la vista responsiva solo me permita ver una card como cuando usas bootstrap con la clase (col-12) y que no se vea esa franja negra abajo que nose como hacer para arreglarlo.
    – CarloS
    el 28 feb. 2019 a las 22:23

1 respuesta 1

0

Le dejo una solución que le puede ser de utilidad.

En tu diseño CSS realice algunas modificaciones para poder trabajar cómodamente con las etiquetas de flexbox y mejore el entorno de cada una de sus Cards.

Para el diseño Responsive Puede siempre usar condiciones @media y asignar las medidas de tamaño de pantalla que consideres. Para su caso no las use y utilice la etiqueta flex:wrap que permite acomodar los elementos según el tamaño del viewport, si un elemento no se acomoda lo envia a la parte de abajo para no dañar el diseño.

Espero le sirva.

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

.contenedor {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 95%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #FFF !important;
  margin: 0 auto;
}

.contenedor .card {
  position: relative;
  background: #000;
  overflow: hidden;
  border-radius: 5px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  margin-bottom: 20px;
  padding: 0;
}

.contenedor .card:hover {
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.8);
}

.contenedor .card .img-box {
  position: relative;
  top: 0;
  left: 0;
  max-width: 350px;
  width: 100%;
  height: auto;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}

.contenedor .card:hover .img-box {
  opacity: 0.5;
}

.contenedor .card .img-box img {
  width: 100%;
  margin-bottom: 0px;
  height: 100%;
}

.contenedor .card .content {
  position: absolute;
  width: 100%;
  height: 60%;
  bottom: -100%;
  padding: 20px;
  padding-top: 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.contenedor .card:hover .content {
  bottom: 0;
}

/*Aca estan los hermanos... Importante cambiar si solo se quiere 1*/

.contenedor .card:nth-child(1) .content {
  background: -webkit-gradient(linear, left bottom, left top, from(#0075F2), to(transparent));
  background: -webkit-linear-gradient(bottom, #0075F2, transparent);
  background: -o-linear-gradient(bottom, #0075F2, transparent);
  background: linear-gradient(0deg, #0075F2, transparent);
}

.contenedor .card:nth-child(2) .content {
  background: -webkit-gradient(linear, left bottom, left top, from(#30F200), to(transparent));
  background: -webkit-linear-gradient(bottom, #30F200, transparent);
  background: -o-linear-gradient(bottom, #30F200, transparent);
  background: linear-gradient(0deg, #30F200, transparent);
}

.contenedor .card:nth-child(3) .content {
  background: -webkit-gradient(linear, left bottom, left top, from(#EE00F2), to(transparent));
  background: -webkit-linear-gradient(bottom, #EE00F2, transparent);
  background: -o-linear-gradient(bottom, #EE00F2, transparent);
  background: linear-gradient(0deg, #EE00F2, transparent);
}

.contenedor .card .content h2 {
  margin: 0 0 10px;
  padding: 0;
  color: #fff;
  font-size: 20px;
}

.contenedor .card .content h2 span {
  color: #ffeb3b;
  font-size: 15px;
}

.contenedor .card .content p {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 15px;
}

.contenedor .card .content ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 0 0;
  padding: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.contenedor .card .content ul li {
  list-style: none;
}

.contenedor .card .content ul li a {
  color: #fff;
  padding: 0 10px;
  font-size: 18px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
<!DOCTYPE html>
<html lang="es">

<head>
    <title>Tarjeta Responsive</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <div class="contenedor">
        <div class="card">
            <div class="img-box">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg" alt="">
            </div>
            <div class="content">
                <h2>Carlos Zalazar <br><span>UX/UI Desinger</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, voluptatibus officiis debitis
                    delectus enim expedita.</p>
                <ul>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="img-box">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/9.jpg" alt="">
            </div>
            <div class="content">
                <h2>Carlos Zalazar <br><span>UX/UI Desinger</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, voluptatibus officiis debitis
                    delectus enim expedita.</p>

                <ul>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="img-box">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg" alt="">
            </div>
            <div class="content">
                <h2>Carlos Zalazar <br><span>UX/UI Desinger</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, voluptatibus officiis debitis
                    delectus enim expedita.</p>

                <ul>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

1
  • muchísimas gracias, me ayudaste muchísimo con esto.
    – CarloS
    el 17 mar. 2019 a las 0:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.