I have a problem with the alignment and separation of the boxes.
In the image you can see that one box is completely stuck with another.
And the CSS code I think is correct.
With the responsive design I have the problem that the boxes are not aligned in the center.
Shall anybody help me?
I copy the code.
Thanks!!
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title> Maquetación con Flexbox </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Inicio container-->
<div id="container">
<!--Inicio cabecera-->
<header id="header">
<div class="logo">
<h1> Portafolio</h1>
</div>
<nav id="menu">
<ul>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Proyectos</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contacto</a>
</li>
</ul>
</nav>
</header>
<!--Fin cabecera-->
<!--Incio contenido-->
<section id="content">
<aside id="aside">
<h2>¿Que quieres ver?</h2>
<ul>
<li>
<a href="#">Webs</a>
</li>
<li>
<a href="#">Apps</a>
</li>
<li>
<a href="#">Diseños</a>
</li>
<li>
<a href="#">Otros</a>
</li>
</ul>
</aside>
<div id="projects">
<article class="project">
<div class="image-wrap">
<img src="https://via.placeholder.com/250x180"/>
</div>
<div class="project-info">
<a href="#">Nombre proyecto</a>
<p>Sitio web</p>
</div>
</article>
<article class="project">
<div class="image-wrap">
<img src="https://via.placeholder.com/250x180"/>
</div>
<div class="project-info">
<a href="#">Nombre proyecto</a>
<p>Sitio web</p>
</div>
</article>
<article class="project">
<div class="image-wrap">
<img src="https://via.placeholder.com/250x180"/>
</div>
<div class="project-info">
<a href="#">Nombre proyecto</a>
<p>Sitio web</p>
</div>
</article>
<article class="project">
<div class="image-wrap">
<img src="https://via.placeholder.com/250x180"/>
</div>
<div class="project-info">
<a href="#">Nombre proyecto</a>
<p>Sitio web</p>
</div>
</article>
<article class="project">
<div class="image-wrap">
<img src="https://via.placeholder.com/250x180"/>
</div>
<div class="project-info">
<a href="#">Nombre proyecto</a>
<p>Sitio web</p>
</div>
</article>
<article class="project">
<div class="image-wrap">
<img src="https://via.placeholder.com/250x180"/>
</div>
<div class="project-info">
<a href="#">Nombre proyecto</a>
<p>Sitio web</p>
</div>
</article>
<article class="project">
<div class="image-wrap">
<img src="https://via.placeholder.com/250x180"/>
</div>
<div class="project-info">
<a href="#">Nombre proyecto</a>
<p>Sitio web</p>
</div>
</article>
<article class="project">
<div class="image-wrap">
<img src="https://via.placeholder.com/250x180"/>
</div>
<div class="project-info">
<a href="#">Nombre proyecto</a>
<p>Sitio web</p>
</div>
</article>
</div>
</section>
<!--Fin contenido-->
<footer id="footer">
<div class="logo">
Portafolio
</div>
<div class="info">
Cristina Martínez - Web ©
</div>
</footer>
</div>
<!--Fin container-->
</body>
</html>
CSS:
*{
text-decoration: none;
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#container{
width: 90%;
height: auto;
margin: 0px auto;
border: 1px solid rgba(225, 225, 226, 0.8);
box-shadow: 0px 0px 10px #cccccc;
margin-top: 40px;
margin-bottom: 40px;
min-height: 600px;
}
#header{
display: grid;
grid-template-columns: 65% 30%;
align-items: center;
width: 100%;
height: 120px;
border-bottom: 1px solid rgba(225, 225, 226, 0.8);
}
.logo{
font-family: Helvetica;
font-style: italic;
font-weight: 900px;
font-size: 35px;
padding: 10px;
margin-left: 20px;
color: black;
text-shadow: 1px 1px 0px #cccccc;
text-transform: uppercase;
}
.logo h1{
font-family: Helvetica;
font-style: italic;
font-weight: 900px;
font-size: 35px;
}
#menu{
width: 100%;
height: 100%;
padding-left: 20px;
}
#menu > ul{
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
justify-content: center;
text-align: center;
list-style: none;
height: 100%;
padding-right: 20px;
}
#menu a{
color: #444444;
text-transform: uppercase;
padding: 15px;
transition: all 300ms;
}
#menu a:hover{
background: #cccccc;
color: white;
}
#content{
display: grid;
grid-template-columns: 20% 1fr;
align-items: start;
grid-column-gap: 7px;
padding-top: 20px;
padding-bottom: 20px;
}
#projects{
display: grid;
grid-template-columns: repeat(auto-fill, 220px);
grid-gap: 20px;
align-items: start;
}
.project{
margin-bottom: 25px;
border: 1px solid #cccccc;
width: 250px;
margin-right: 20px;
text-align: center;
}
.project img{
width: 100%;
}
.project-info{
padding: 10px;
}
.project-info a{
font-size: 16px;
color: black;
transition: all 300ms;
}
.project-info a:hover{
color: blue;
}
.project-info p{
font-size: 16px;
color: grey;
}
#aside{
margin-right: 30px;
padding: 15px;*/
}
#aside h2{
display: block;
width: 100%;
font-size: 18px;
font-weight: 100;
color: #444444;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(225, 225, 226, 0.8);
text-align: center;
}
#aside ul{
list-style: none;
}
#aside ul li{
padding-bottom: 20px;
}
#aside a{
text-align: center;
display: block;
padding: 20px;
background: #eeeeee;
color: #444444;
transition: all 300ms;
text-transform: uppercase;
}
#aside a:hover{
background: #444444;
color: #eeeeee;
}
#footer{
display: grid;
grid-template-columns: 1fr 25%;
align-items: center;
justify-content: start;
height: 120px;
align-items: center;
border-top: 1px solid rgba(225, 225, 226, 0.8);;
}
#footer .logo{
opacity: 0.5;
text-align: left;
margin-right: 20px;
}
#footer .info{
margin-left: 20px;
color: #444444;
}
@media (max-width: 784px){
#header{
display: grid;
grid-template-columns: 100%;
align-items: center;
justify-content: center;
height: 140px;
padding-bottom: 20px;
}
#header h1{
text-align: center;
}
#content{
display: grid;
grid-template-columns: 1fr;
align-items: start;
grid-column-gap: auto;
}
#projects{
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
margin-right: 10px;
margin-left: 10px;
}
.project{
margin-right: 10px;
margin-left: 10px;
}
#aside{
margin: 0px;
padding: 15px;
}
#aside ul{
display: grid;
grid-template-columns: repeat (4, 1fr);
grid-gap: 10px;
}
#footer{
display: grid;
grid-template-columns: 1fr;
align-items: center;
justify-content: center;
text-align: center !important;
}
#footer .logo{
text-align: center;
}
}
from Recent Questions - Stack Overflow https://ift.tt/3kWbXER
https://ift.tt/2HzFh5v
No comments:
Post a Comment