У меня есть проблема, с которой я столкнулся, когда пытался кодировать целевую страницу.
В основном у меня есть эти два раздела, экспертизы и контакты.
Проблема в том, что раздел контактов перекрывает раздел над ним на маленьких экранах.
В разделе экспертиз у меня есть контейнер, куда я помещаю display: grid, чтобы правильно выровнять все элементы.
На больших экранах все работает нормально.
У вас есть идеи о том, как я могу решить эту проблему?
DEMO
HTML:
!<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="./css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--expertise-->
<section id="expertises">
.<div class="container">
<div class="expertises-head">
<h2>Di cosa mi occupo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise1">
<img src="./img/together.png">
<h3>Competenza 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise2">
<img src="./img/together.png">
<h3>Competenza 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise3">
<img src="./img/together.png">
<h3>Competenza 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise4">
<img src="./img/together.png">
<h3>Competenza 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise5">
<img src="./img/together.png">
<h3>Competenza 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise6">
<img src="./img/together.png">
<h3>Competenza 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</section>
<!--END expertise-->
<!--contacts-->
<section id="contacts">
<div class="container">
<div class="contacts-head">
<h2>Contatti</h2>
</div>
<div class="contacts-form">
<form action="contattami.php" method="post">
<div class="form-group">
<label for="InputName">Nome e cognome</label>
<input type="text" name="nome" required="" placeholder="Nome e cognome" class="InputName">
</div>
<div class="form-group">
<label for="InputEmail">Indirizzo e-mail</label>
<input type="email" name="email" required="" placeholder="Indirizzo e-mail" class="InputEmail">
</div>
<div class="form-group">
<label for="InputSubject">Oggetto</label>
<input type="text" name="oggetto" required="" placeholder="Oggetto" class="InputSubject">
</div>
<div class="form-group">
<label for="InputMsg">Messaggio </label>
<textarea name="messaggio" rows="4" required="" placeholder="Messaggio" class="InputMsg"></textarea>
</div>
<div class="form-group">
<input type="submit" name="submit" placeholder="Invia" class="Submit">
</div>
</form>
</div>
<div class="contact-others">
<ul>
<li>
<div class="contact-email">
<h3 class="text-uppercase">Indirizzo email <img src=".\img\mail.png"></h3>
<p>probootstrap@gmail.com</p>
</div>
</li>
<li>
<div class="contact-cellphone">
<h3 class="text-uppercase">Cellullare <img src=".\img\smartphone-call.png"></h3>
<p>+30 976 1382 9921</p>
</div>
</li>
<li>
<div class="contact-skype">
<h3 class="text-uppercase">Skype <img src=".\img\skype-logo.png"></h3>
<p>Maria.rosaria.ciullo</p>
</div>
</li>
<li>
<div class="contact-address">
<h3 class="text-uppercase">Indirizzo <img src=".\img\location.png"></h3>
<p>San Francisco, CA</p>
<p>4th Floor8 Lower</p>
<p>San Francisco street, M1 50F</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!--END contacts-->
</body>
</html>
CSS:
*, *::before, *::after {
box-sizing: border-box;
}
body{
font-family: 'Raleway', 'PT Sans', sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
background: #FFF;
}
img{
width: 100%
}
.container{
max-width: 1271px;
text-align: center;
margin: 0 auto;
padding: 0 3rem;
}
/* expertises */
#expertises{
width: 100%;
min-height: 100vh;
padding: 5em 0;
}
#expertises .container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
}
#expertises .expertises-head{
grid-column: 1/4;
grid-row: 1;
margin-bottom: 2vh;
}
#expertises img{
width: auto;
}
/* contacts */
#contacts{
width: 100%;
min-height: 100vh;
padding: 5em 0;
display: inline-block;
}
#contacts .container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
}
#contacts .contacts-head{
grid-column: 1/3;
grid-row: 1;
text-align: left;
}
#contacts .contacts-form{
grid-column: 1/3;
grid-row: 2;
text-align: left;
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7)
}
#contacts .contact-others{
grid-column: 3/3;
grid-row: 2;
text-align: left;
}
#contacts .contact-email, .contact-cellphone, .contact-address, .contacts-skype{
margin-bottom: 30px;
}
#contacts .text-uppercase{
font-size: 20px;
font-weight: bold;
}
#contacts ul{
list-style-type: none;
}
#contacts p{
line-height: 8px;
}
#contacts img{
width: auto;
}
Это проблема в принципе.
