Contacts section overlaps the section that uses display: grid above it
up vote
1
down vote
favorite
I have a problem that I encountered while I was trying to coding a landing page.
Basically I have this two sections, expertises and contacts.
The problem is that the section contacts overlaps the section above it on small screens.
In the expertises section I have a container where I put a display: grid in order to align all the elements correctly.
Everything works fine on big screens though.
Do you have any idea about how could I fix this problem?
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=".imgmail.png"></h3>
<p>probootstrap@gmail.com</p>
</div>
</li>
<li>
<div class="contact-cellphone">
<h3 class="text-uppercase">Cellullare <img src=".imgsmartphone-call.png"></h3>
<p>+30 976 1382 9921</p>
</div>
</li>
<li>
<div class="contact-skype">
<h3 class="text-uppercase">Skype <img src=".imgskype-logo.png"></h3>
<p>Maria.rosaria.ciullo</p>
</div>
</li>
<li>
<div class="contact-address">
<h3 class="text-uppercase">Indirizzo <img src=".imglocation.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;
}
This is the problem basically.
html css html5 css3 css-grid
asked Nov 7 at 18:27
Michele De Giorgi
62
add a comment |
up vote
1
down vote
favorite
I have a problem that I encountered while I was trying to coding a landing page.
Basically I have this two sections, expertises and contacts.
The problem is that the section contacts overlaps the section above it on small screens.
In the expertises section I have a container where I put a display: grid in order to align all the elements correctly.
Everything works fine on big screens though.
Do you have any idea about how could I fix this problem?
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=".imgmail.png"></h3>
<p>probootstrap@gmail.com</p>
</div>
</li>
<li>
<div class="contact-cellphone">
<h3 class="text-uppercase">Cellullare <img src=".imgsmartphone-call.png"></h3>
<p>+30 976 1382 9921</p>
</div>
</li>
<li>
<div class="contact-skype">
<h3 class="text-uppercase">Skype <img src=".imgskype-logo.png"></h3>
<p>Maria.rosaria.ciullo</p>
</div>
</li>
<li>
<div class="contact-address">
<h3 class="text-uppercase">Indirizzo <img src=".imglocation.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;
}
This is the problem basically.
html css html5 css3 css-grid
asked Nov 7 at 18:27
Michele De Giorgi
62
I can't reproduce the problem. Using your demo in Chrome, there is no overlap between "Di cosa mi occupo" & "Contatti" sections on smaller screens.
– Michael_B
Nov 8 at 3:35
Well, thank you for your answer. Well, I assure that there is a problem as you can see in the new picture I posted. That screen comes from the original file though.
– Michele De Giorgi
Nov 8 at 11:50
I would like to assist you, but I don't see the problem you describe in the code you provided. Try to post enough code to reproduce the problem you're having.
– Michael_B
Nov 9 at 3:08
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have a problem that I encountered while I was trying to coding a landing page.
Basically I have this two sections, expertises and contacts.
The problem is that the section contacts overlaps the section above it on small screens.
In the expertises section I have a container where I put a display: grid in order to align all the elements correctly.
Everything works fine on big screens though.
Do you have any idea about how could I fix this problem?
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=".imgmail.png"></h3>
<p>probootstrap@gmail.com</p>
</div>
</li>
<li>
<div class="contact-cellphone">
<h3 class="text-uppercase">Cellullare <img src=".imgsmartphone-call.png"></h3>
<p>+30 976 1382 9921</p>
</div>
</li>
<li>
<div class="contact-skype">
<h3 class="text-uppercase">Skype <img src=".imgskype-logo.png"></h3>
<p>Maria.rosaria.ciullo</p>
</div>
</li>
<li>
<div class="contact-address">
<h3 class="text-uppercase">Indirizzo <img src=".imglocation.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;
}
This is the problem basically.
html css html5 css3 css-grid
asked Nov 7 at 18:27
Michele De Giorgi
62
I have a problem that I encountered while I was trying to coding a landing page.
Basically I have this two sections, expertises and contacts.
The problem is that the section contacts overlaps the section above it on small screens.
In the expertises section I have a container where I put a display: grid in order to align all the elements correctly.
Everything works fine on big screens though.
Do you have any idea about how could I fix this problem?
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=".imgmail.png"></h3>
<p>probootstrap@gmail.com</p>
</div>
</li>
<li>
<div class="contact-cellphone">
<h3 class="text-uppercase">Cellullare <img src=".imgsmartphone-call.png"></h3>
<p>+30 976 1382 9921</p>
</div>
</li>
<li>
<div class="contact-skype">
<h3 class="text-uppercase">Skype <img src=".imgskype-logo.png"></h3>
<p>Maria.rosaria.ciullo</p>
</div>
</li>
<li>
<div class="contact-address">
<h3 class="text-uppercase">Indirizzo <img src=".imglocation.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;
}
This is the problem basically.
html css html5 css3 css-grid
html css html5 css3 css-grid
asked Nov 7 at 18:27
Michele De Giorgi
62
asked Nov 7 at 18:27
Michele De Giorgi
62
edited Nov 8 at 11:47
asked Nov 7 at 18:27
Michele De Giorgi
62
asked Nov 7 at 18:27
Michele De Giorgi
62
asked Nov 7 at 18:27
Michele De Giorgi
62
62
I can't reproduce the problem. Using your demo in Chrome, there is no overlap between "Di cosa mi occupo" & "Contatti" sections on smaller screens.
– Michael_B
Nov 8 at 3:35
Well, thank you for your answer. Well, I assure that there is a problem as you can see in the new picture I posted. That screen comes from the original file though.
– Michele De Giorgi
Nov 8 at 11:50
I would like to assist you, but I don't see the problem you describe in the code you provided. Try to post enough code to reproduce the problem you're having.
– Michael_B
Nov 9 at 3:08
add a comment |
I can't reproduce the problem. Using your demo in Chrome, there is no overlap between "Di cosa mi occupo" & "Contatti" sections on smaller screens.
– Michael_B
Nov 8 at 3:35
Well, thank you for your answer. Well, I assure that there is a problem as you can see in the new picture I posted. That screen comes from the original file though.
– Michele De Giorgi
Nov 8 at 11:50
I would like to assist you, but I don't see the problem you describe in the code you provided. Try to post enough code to reproduce the problem you're having.
– Michael_B
Nov 9 at 3:08
I can't reproduce the problem. Using your demo in Chrome, there is no overlap between "Di cosa mi occupo" & "Contatti" sections on smaller screens.
– Michael_B
Nov 8 at 3:35
I can't reproduce the problem. Using your demo in Chrome, there is no overlap between "Di cosa mi occupo" & "Contatti" sections on smaller screens.
– Michael_B
Nov 8 at 3:35
Well, thank you for your answer. Well, I assure that there is a problem as you can see in the new picture I posted. That screen comes from the original file though.
– Michele De Giorgi
Nov 8 at 11:50
Well, thank you for your answer. Well, I assure that there is a problem as you can see in the new picture I posted. That screen comes from the original file though.
– Michele De Giorgi
Nov 8 at 11:50
I would like to assist you, but I don't see the problem you describe in the code you provided. Try to post enough code to reproduce the problem you're having.
– Michael_B
Nov 9 at 3:08
I would like to assist you, but I don't see the problem you describe in the code you provided. Try to post enough code to reproduce the problem you're having.
– Michael_B
Nov 9 at 3:08
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
If you add a media query for width below 600px and change #contacts .contact-others class with the following it should work.
#contacts .contact-others{
grid-column: 1/3;
grid-row: 4;
text-align: left;
}
answered Nov 7 at 19:33
aneo
134
Thank you for your answer but it doesn't work!
– Michele De Giorgi
Nov 7 at 23:54
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
If you add a media query for width below 600px and change #contacts .contact-others class with the following it should work.
#contacts .contact-others{
grid-column: 1/3;
grid-row: 4;
text-align: left;
}
answered Nov 7 at 19:33
aneo
134
Thank you for your answer but it doesn't work!
– Michele De Giorgi
Nov 7 at 23:54
add a comment |
up vote
0
down vote
If you add a media query for width below 600px and change #contacts .contact-others class with the following it should work.
#contacts .contact-others{
grid-column: 1/3;
grid-row: 4;
text-align: left;
}
answered Nov 7 at 19:33
aneo
134
Thank you for your answer but it doesn't work!
– Michele De Giorgi
Nov 7 at 23:54
add a comment |
up vote
0
down vote
up vote
0
down vote
If you add a media query for width below 600px and change #contacts .contact-others class with the following it should work.
#contacts .contact-others{
grid-column: 1/3;
grid-row: 4;
text-align: left;
}
answered Nov 7 at 19:33
aneo
134
If you add a media query for width below 600px and change #contacts .contact-others class with the following it should work.
#contacts .contact-others{
grid-column: 1/3;
grid-row: 4;
text-align: left;
}
answered Nov 7 at 19:33
aneo
134
answered Nov 7 at 19:33
aneo
134
answered Nov 7 at 19:33
aneo
134
answered Nov 7 at 19:33
aneo
134
134
Thank you for your answer but it doesn't work!
– Michele De Giorgi
Nov 7 at 23:54
add a comment |
Thank you for your answer but it doesn't work!
– Michele De Giorgi
Nov 7 at 23:54
Thank you for your answer but it doesn't work!
– Michele De Giorgi
Nov 7 at 23:54
Thank you for your answer but it doesn't work!
– Michele De Giorgi
Nov 7 at 23:54
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53195601%2fcontacts-section-overlaps-the-section-that-uses-display-grid-above-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I can't reproduce the problem. Using your demo in Chrome, there is no overlap between "Di cosa mi occupo" & "Contatti" sections on smaller screens.
– Michael_B
Nov 8 at 3:35
Well, thank you for your answer. Well, I assure that there is a problem as you can see in the new picture I posted. That screen comes from the original file though.
– Michele De Giorgi
Nov 8 at 11:50
I would like to assist you, but I don't see the problem you describe in the code you provided. Try to post enough code to reproduce the problem you're having.
– Michael_B
Nov 9 at 3:08