I am having a problem with positioning, everything works fine except the last section contactform.
The problem is that when I zoom in, the contactform overlaps on services section.
Here's the code:
.services {
width: 100%;
height: 160vh;
margin: 100px 0;
position: relative;
}
.services-content {
/* position: relative; */
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.services-content h1 {
font-size: 40px;
letter-spacing: 4px;
}
.content-row-one {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
margin-top: 100px;
}
.row-one {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.quality-management {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.quality-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.testing-calibration {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.testing-calibration h6 {
font-size: 18px;
text-transform: uppercase;
}
.medical-devices {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.medical-devices h6 {
font-size: 18px;
text-transform: uppercase;
}
.content-row-two {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
}
.row-two {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.lead-auditor {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.lead-auditor h6 {
font-size: 18px;
text-transform: uppercase;
}
.project-management {
display: flex;
flex-direction: column;
width: 35%;
height: 24px;
margin: 0px 60px;
}
.project-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.quality-assurance {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.quality-assurance h6 {
font-size: 18px;
text-transform: uppercase;
}
.content-row-three {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
}
.row-three {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.document-management {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.document-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.contactform {
width: 100%;
height: 50vh;
position: relative;
}
.contact {
width: 100%;
height: 100%;
text-align: center;
}
.contact h1 {
font-size: 40px;
letter-spacing: 4px;
}
.contact-content {
width: 70%;
height: 100%;
display: flex;
/* justify-content: center;
text-align: center; */
margin: 0 auto;
/* position: absolute; */
margin-top: 50px;
}
.contact-column-one {
width: 33%;
height: 50%;
}
.contact-column-one .location i {
font-size: 50px;
cursor: pointer;
}
.contact-column-one .location i:hover{
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-one h1 {
font-size: 30px;
}
.contact-column-two {
width: 33%;
height: 50%;
}
.contact-column-two .phone i {
font-size: 50px;
cursor: pointer;
}
.contact-column-two .phone i:hover {
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-two h1 {
font-size: 30px;
}
.contact-column-three {
width: 33%;
height: 50%;
}
.contact-column-three .email i {
font-size: 50px;
cursor: pointer;
}
.contact-column-three .email i:hover {
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-three h1 {
font-size: 30px;
}
<section class="services" id="services">
<div class="services-content">
<h1>OUR SERVICES</h1>
<div class="content-row-one">
<div class="row-one">
<div class="quality-management">
<h6>1. Quality Management Systems according to ISO 9000 2015</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="testing-calibration">
<h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="medical-devices">
<h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
<div class="content-row-two">
<div class="row-two">
<div class="lead-auditor">
<h6>4. Lead Auditor according to ISO 9001</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="project-management">
<h6>5. Project Management</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="quality-assurance">
<h6>6. Quality Assurance</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
<div class="content-row-three">
<div class="row-three">
<div class="document-management">
<h6>7. Document Management with SharePoint Server</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
</section>
<section class="contactform" id="contactform">
<div class="contact">
<h1>CONTACT US</h1>
<div class="contact-content">
<div class="contact-column-one">
<span class="location">
<i class="material-icons">
place
</i>
</span>
<h1>ADDRESS</h1>
<p>Address</p>
</div>
<div class="contact-column-two">
<span class="phone">
<i class="material-icons">
phone
</i>
</span>
<h1>PHONE</h1>
<p>Phone Number</p>
</div>
<div class="contact-column-three">
<span class="email">
<i class="material-icons">
email
</i>
</span>
<h1>EMAIL</h1>
<p>Email</p>
</div>
</div>
</div>
</section>
I've tried removing position, from absolute to relative and vice versa, but nothing changed.
If you need more code or explanation please feel free to ask.
Thank you for your time!
Here's a photo:
While you have a fixed height for .services it will always overlap when the content total height higher than .services height, instead you could use min-height so if the content height less than 160vh the height will remain 160vh but if the content height more than 160vh then .services height will grow corresponding to the content.
.services {
width: 100%;
min-height: 160vh;
margin: 100px 0;
position: relative;
}
.services-content {
/* position: relative; */
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.services-content h1 {
font-size: 40px;
letter-spacing: 4px;
}
.content-row-one {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
margin-top: 100px;
}
.row-one {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.quality-management {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.quality-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.testing-calibration {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.testing-calibration h6 {
font-size: 18px;
text-transform: uppercase;
}
.medical-devices {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.medical-devices h6 {
font-size: 18px;
text-transform: uppercase;
}
.content-row-two {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
}
.row-two {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.lead-auditor {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.lead-auditor h6 {
font-size: 18px;
text-transform: uppercase;
}
.project-management {
display: flex;
flex-direction: column;
width: 35%;
height: 24px;
margin: 0px 60px;
}
.project-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.quality-assurance {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.quality-assurance h6 {
font-size: 18px;
text-transform: uppercase;
}
.content-row-three {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
}
.row-three {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.document-management {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.document-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.contactform {
width: 100%;
height: 50vh;
position: relative;
}
.contact {
width: 100%;
height: 100%;
text-align: center;
}
.contact h1 {
font-size: 40px;
letter-spacing: 4px;
}
.contact-content {
width: 70%;
height: 100%;
display: flex;
/* justify-content: center;
text-align: center; */
margin: 0 auto;
/* position: absolute; */
margin-top: 50px;
}
.contact-column-one {
width: 33%;
height: 50%;
}
.contact-column-one .location i {
font-size: 50px;
cursor: pointer;
}
.contact-column-one .location i:hover{
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-one h1 {
font-size: 30px;
}
.contact-column-two {
width: 33%;
height: 50%;
}
.contact-column-two .phone i {
font-size: 50px;
cursor: pointer;
}
.contact-column-two .phone i:hover {
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-two h1 {
font-size: 30px;
}
.contact-column-three {
width: 33%;
height: 50%;
}
.contact-column-three .email i {
font-size: 50px;
cursor: pointer;
}
.contact-column-three .email i:hover {
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-three h1 {
font-size: 30px;
}
<section class="services" id="services">
<div class="services-content">
<h1>OUR SERVICES</h1>
<div class="content-row-one">
<div class="row-one">
<div class="quality-management">
<h6>1. Quality Management Systems according to ISO 9000 2015</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="testing-calibration">
<h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="medical-devices">
<h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
<div class="content-row-two">
<div class="row-two">
<div class="lead-auditor">
<h6>4. Lead Auditor according to ISO 9001</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="project-management">
<h6>5. Project Management</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="quality-assurance">
<h6>6. Quality Assurance</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
<div class="content-row-three">
<div class="row-three">
<div class="document-management">
<h6>7. Document Management with SharePoint Server</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
</section>
<section class="contactform" id="contactform">
<div class="contact">
<h1>CONTACT US</h1>
<div class="contact-content">
<div class="contact-column-one">
<span class="location">
<i class="material-icons">
place
</i>
</span>
<h1>ADDRESS</h1>
<p>Address</p>
</div>
<div class="contact-column-two">
<span class="phone">
<i class="material-icons">
phone
</i>
</span>
<h1>PHONE</h1>
<p>Phone Number</p>
</div>
<div class="contact-column-three">
<span class="email">
<i class="material-icons">
email
</i>
</span>
<h1>EMAIL</h1>
<p>Email</p>
</div>
</div>
</div>
</section>
You should set height: auto;
jsfiddle:
https://jsfiddle.net/qhsygpb5/
Explanation: when you set "height: 200px" element height will be 200px no matter how much content contains. Other solution is to add "overflow:hidden;" but than you will not see all content if there is not room. Also you can add "overflow: scroll;" if you want to scroll the content within 200px height.
Related
I'm learning html/css, and while making a page, I want to test if I could make the color of a button to change from red to green when the width is under 900px. After multiple tests, the other properties work fine (bold text, text color) but the background-color of the button doesn't seem to change at all, and I can't find why.
The HTML code is :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing EST</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="styleaccueil.css">
<!-- <link rel="stylesheet" href="styleaccueilphone.css"> -->
</head>
<body>
<header id="hautdepage">
<img class="logoheader" src="/">
Nos activités
Formulaire
Nous connaître
<a href="mailto:xxx" class="texteheader" target="_blank" >Nous contacter</a>
</header>
<div id="toutsaufheaderfooter" >
<div class="presentation">
<div class="textepresentation">
<h1 class="titrepresentation">Qui sommes nous ?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis atque consectetur ut amet laboriosam ratione fugit impedit velit, dolore in aliquid sint sit corporis ad sequi excepturi a tenetur molestiae eligendi ex delectus alias officia! Ratione dignissimos necessitatibus doloribus! Ipsa vel officiis optio, iure modi atque quo at aspernatur numquam.</p>
<div class="boutonspresentation" >
<a href="https://fr.linkedin.com" class="bouton1" target="_blank" >Faisons connaissance</a>
<a href="mailto:xxx" class="bouton1" target="_blank" >Contactez-nous</a>
</div>
</div>
<iframe src= "https://www.youtube.com/embed/weP6BLvfzG8" frameborder= "0" allowfullscreen></iframe>
</div>
<div class="deuxiemesalve">
<div class="deuxiemesalveparagraphetitre">
<div class="blocdeuxiemesalve" >
<h2 class="h2deuxiemesalve">Lorem ipsum dolor sit amet.</h2>
<p class="textedeuxiemesalve">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, tenetur quasi magnam fuga beatae eum voluptas repellat. Unde quam asperiores esse? Nesciunt praesentium enim aperiam culpa fugiat reprehenderit esse labore, nulla molestias. Hic debitis, officiis pariatur odit enim ut facere.</p>
</div>
<div class="blocdeuxiemesalve" >
<h2 class="h2deuxiemesalve">Lorem ipsum dolor sit amet.</h2>
<p class="textedeuxiemesalve">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, tenetur quasi magnam fuga beatae eum voluptas repellat. Unde quam asperiores esse? Nesciunt praesentium enim aperiam culpa fugiat reprehenderit esse labore, nulla molestias. Hic debitis, officiis pariatur odit enim ut facere.</p>
</div>
<div class="blocdeuxiemesalve" >
<h2 class="h2deuxiemesalve">Lorem ipsum dolor sit amet.</h2>
<p class="textedeuxiemesalve">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, tenetur quasi magnam fuga beatae eum voluptas repellat. Unde quam asperiores esse? Nesciunt praesentium enim aperiam culpa fugiat reprehenderit esse labore, nulla molestias. Hic debitis, officiis pariatur odit enim ut facere.</p>
</div>
</div>
</div>
<div class="troisiemesalve">
<img class="imagedouble" src="images/howscrumwork.jpg">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum laudantium vel non quas eum aliquid ut quo incidunt aspernatur in aperiam, nulla, commodi vitae placeat. Magni similique cum omnis quae!</p>
<img class="imagedouble" src="images/mecpostit.jpg">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum laudantium vel non quas eum aliquid ut quo incidunt aspernatur in aperiam, nulla, commodi vitae placeat. Magni similique cum omnis quae!</p>
</div>
</div>
<footer>
<div class="boitefooter">
<div class="footerun">
<p>ici on mettrais des liens vers les réseaux sociaux ou les mentions légales par exemple</p>
</div>
<div class="footerdeux">
<a class="retourvershautdepage" href="#hautdepage" > Retour en haut de page </a>
</div>
</div>
</footer>
</body>
</html>
The 1st CSS code is :
/* Reset CSS */
*{
margin: 0;
padding: 0;
/* box-sizing: border-box; */
}
body{
font-family: 'Lato', sans-serif;
width: 100%;
}
/*Ici je dis que toute la page sera en Lato sauf contradiction*/
/*Ici je me met le leins de la police Libre Franklin si besoin = font-family: 'Libre Franklin', sans-serif; */
header{
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
width: 100%;
}
.logoheader{
min-width: 10%;
min-height: 10%;
max-width: 12%;
max-height: 12%;
margin : 1em
}
.texteheader{
margin: 1em;
color: black;
text-decoration:none;
}
.retourvershautdepage{
padding: 10px 30px;
background: rgb(192, 44, 44);
color: white;
text-decoration:none;
border-radius: 50px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.retourvershautdepage:hover{
background: rgb(196, 104, 17);
}
.retourverspageaccueil{
padding: 10px 30px;
background: rgb(192, 44, 44);
color: white;
text-decoration:none;
border-radius: 50px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.retourverspageaccueil:hover{
background: rgb(196, 104, 17);
}
footer{
margin-top: 3em;
text-align: center;
background-color: darkblue;
color: aliceblue;
width: 100%;
}
.boitefooter{
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-wrap: wrap;
}
#media only screen and (max-width:900px) {
.retourvershautdepage{
font-weight: bold;
background: rgb(44, 192, 44);
}
.retourvershautdepage:hover{
background: rgb(231, 217, 16);
}
}
.footerdeux{
margin-top: 15px;
}
The 2nd CSS is :
.presentation{
display: flex;
margin-top: 3em;
align-items: center;
justify-content: flex-end;
}
.presentation p{
margin-bottom: 20px;
}
.textepresentation{
width: 30%;
max-height: 15%;
margin-right: 8em;
}
a.bouton1 {
padding: 10px 30px;
margin: 5px;
background: rgb(0, 0, 95);
color: white;
text-decoration:none;
border-radius: 50px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
a.bouton1:hover {
background: rgb(196, 17, 115);
}
iframe{
width: 900px;
height: 500px;
}
.deuxiemesalveparagraphetitre{
display: flex;
justify-content: space-evenly;
align-content: center;
align-items: center;
}
.deuxiemesalve{
display: flex;
justify-content: space-evenly;
align-content: center;
align-items: center;
margin-left: 7em;
margin-right: 7em;
text-align: center;
}
.h2deuxiemesalve{
margin-left: 2em;
margin-right: 2em;
margin-top: 3em;
}
.deuxiemesalveparagraphe{
display: flex;
justify-content: space-evenly;
align-content: center;
align-items: center;
}
.textedeuxiemesalve{
margin-left: 2em;
margin-right: 2em;
}
.troisiemesalve{
display: flex;
margin-top: 5em;
align-items: center;
}
.imagedouble{
width: 20%;
height: 15%;
margin-left: 2em;
margin-right: 2em;
}
.retourvershautdepage{
padding: 10px 30px;
background: rgb(192, 44, 44);
color: white;
}
#media only screen and (max-width: 900px) {
body{
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
font-family: 'Lato', sans-serif;
}
#toutsaufheaderfooter{
padding: 0 20px;
display: flex;
flex-direction: column;
}
.presentation{
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 15px;
}
iframe{
height: 248px;
width: 100%;
}
.textepresentation{
width: 95%;
padding: 15px 0;
margin-right: 0;
}
.boutonspresentation{
display: flex;
flex-direction: column;
}
.blocdeuxiemesalve{
padding: 15px 0;
}
.deuxiemesalve{
margin: 0;
margin-top: 15px;
}
.deuxiemesalveparagraphetitre{
display: flex;
flex-direction: column;
align-content: none;
align-items: none;
}
.h2deuxiemesalve{
margin: 0 0 15px 0;;
}
.textedeuxiemesalve{
margin: 0;
}
.troisiemesalve{
display: flex;
flex-direction: column;
margin-top: 0;
}
.imagedouble{
width: 60%;
padding: 10px 0;
margin: 15px 0;
}
}
Because your 2nd file define "retourvershautdepage backgroup color" again ,
You need to ensure #media is in the last of your css file , or it will be replaced by your 2nd file.
im using a flip box with a front and back content when i hover (rotateY(180deg)) . that worked for simple container (only text) but didn't work when the background was an image this is my first time using nth-child element so any advises are welcome^^.
(its a small screen version for now)
and thanks in advance.
/*
===============
SERVICES
===============
*/
.title-service {
margin-top: 100px;
text-align: center;
}
.title-service p {
margin-top: -30px;
}
.container-service {
width: 70vh;
height: 50vh;
margin-left: 30px;
background: grey;
margin-bottom: 10px;
align-items: center;
text-align: center;
padding-top: 25%;
transform-style: preserve-3d;
transition: 0.3s ease all;
}
.container-service:hover {
transform: rotateY(180deg);
}
.front-card {
backface-visibility: hidden;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.back-card {
backface-visibility: hidden;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transform: rotateY(180deg);
}
.container-service h3 {
color: black;
font-size: 26px;
font-weight: 700;
}
.container-service i {
font-size: 40px;
color: black;
}
.container-service:nth-child(3) {
background-image: url(../Responsive\ Website/img-2.jpg);
background-size: cover;
position: relative;
}
.container-service:nth-child(3) .front-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
.dev h3 {
color: whitesmoke;
}
.dev i {
color: whitesmoke;
}
<!-- START SERVICES -->
<section class="service">
<div class="info-service">
<div class="title-service">
<h1>SERVICES</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</div>
<div class="container-service web">
<div class="front-card">
<span><i class="fas fa-palette"></i></span>
<h3>Web Design</h3>
</div>
<div class="back-card">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero
maxime, reiciendis, ut earum amet architecto, cum magni cumque eum
repudiandae a minus sunt! Sed porro expedita, fuga aspernatur
molestiae iste ab cupiditate repudiandae cumque officia ea.
Tenetur amet ullam voluptatum?
</p>
</div>
</div>
<div class="container-service f-e">
<div class="dev">
<div class="front-card">
<span><i class="fas fa-laptop-code"></i></span>
<h3>Front Dev</h3>
</div>
<div class="back-card">
<h3>Front Dev</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
optio, eum esse doloremque molestias aspernatur.
</p>
</div>
</div>
</div>
<div class="container-service branding">
<div class="front-card">
<span><i class="fas fa-building"></i></span>
<h3>Branding</h3>
</div>
<div class="back-card">
<h3>Branding</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consequuntur, error.
</p>
</div>
</div>
</div>
</section>
<!-- END SERVICES -->
The front and back are stacked above the parent wrapper and have inherited the parent background color, try applying the image to the front card of the third child.
I'm still a rookie, trying to learn HTML and CSS. I'm trying to use 1fr 1fr grid for my "welcome" section. Idea is to put an image on the left side, and text on the right side.
When i go to Inspect and try to see it in Responsive mode, my grid colapses when width goes below 1300, or when height goes below 900.
This is my first section after header, so my question is how should I handle this situation? I don't want to build entire page like this and then realize that I need hundreds of lines of media queries because I used the wrong concept from the beginning :)
I'm trying to get something like this: Example
Below is my code:
.welcome {
padding: 7em 0;
display: flex;
justify-content: center;
}
.welcome-container {
display: grid;
justify-content: center;
align-content: stretch;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
background-color: white;
height: 50vh;
width: 50vw;
overflow: hidden;
}
.welcome-left {
padding: 3em;
border: 1px blue solid;
text-align: center;
}
.welcome-img {
background-image: url(../../img/tetiana-padurets-B-xb7VFtlZg-unsplash.jpg);
width: 100%;
height: 100%;
}
.img {
display: block;
}
.welcome-right {
border: 1px red solid;
padding: 5em 3em;
}
.welcome-title {
text-align: center;
color: #3f3f3f;
font-weight: 400;
margin-top: 1em;
}
<section class="welcome">
<div class="welcome-container">
<div class="welcome-left">
<div class="welcome-img"></div>
</div>
<div class="welcome-right">
<h2 class="welcome-title"><span>Lorem Ipsum!</h2></span>
<p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores.
</p>
</div>
</div>
</section>
Cheers!
<section class="welcome">
<div class="welcome-container">
<div class="welcome-left">
<div class="welcome-img">
<img class="image" src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U">
</div>
</div>
<div class="welcome-right">
<h2 class="welcome-title"><span>Lorem Ipsum!</h2></span>
<p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores.
</p>
</div>
</div>
</section>
In CSS
.welcome {
display: flex;
justify-content: center;
width: 100%;
}
.welcome-container {
display: grid;
justify-content: center;
align-content: stretch;
grid-template-columns: 1fr 1fr;
background-color: white;
width: 50vw;
}
.welcome-left {
padding: 10px;
border: 1px blue solid;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.image {
width: 100%;
height: auto;
}
.img {
display: block;
}
.welcome-right {
border: 1px red solid;
padding: 10px;
}
.welcome-title {
text-align: center;
color: #3f3f3f;
font-weight: 400;
font-size: 2vw;
margin-top: 1em;
}
.welcome-desc {
font-size: 1vw;
}
.welcome-img {
width: 100%;
}
I guess you want something like this.
so basically I'm creating a fake Italian restaurant site and the images in the img-container wont fit the box, leaving a line below the image. Also, the img-container overflows past the image which I don't want it to do. Any help appreciated.
Here is my code
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght#400;700&display=swap");
/* CSS RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body {
background-color: #dee7e7;
font-family: "Open Sans", sans-serif;
}
/* Nav */
nav {
margin-top: -35px;
height: 70px;
background-color: #fff;
margin: 0px 0px 35px 0px;
height: 60px;
padding: 20px;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: #000;
}
nav a:hover {
cursor: pointer;
}
.nav-links {
float: right;
margin-top: -25px;
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.nav-links .current {
font-weight: 700;
text-decoration: underline;
}
.nav-links a {
padding-right: 10px;
font-size: 16px;
text-decoration: none;
color: #000;
font-weight: 400;
}
.nav-links a:hover {
text-decoration: underline;
}
.nav-links a:visited {
color: #000;
}
header nav h3 {
font-family: "Libre Baskerville", serif;
font-size: 26px;
}
/* Showcase 1 */
.showcase {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 20px;
}
.text-container {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container p {
font-size: 16px;
padding-right: 10px;
}
.btn-primary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #06a77d;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px grey;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container {
background: #c9d7d7;
}
.img-container img {
margin-left: 80px;
overflow: auto;
height: 500px;
}
/* Showcase 2 */
.showcase-2 {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 30px;
background: #192534;
color: #fff;
}
.text-container-2 {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 16px;
order: 1;
}
.text-container-2 h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container-2 p {
font-size: 16px;
padding-right: 10px;
}
.btn-secondary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #cc224e;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px black;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container-2 {
background: #3d5777;
padding-right: -300px;
order: 2;
}
.img-container-2 img {
margin-left: 80px;
max-width: 100%;
height: 510px;
}
.img-good-food img {
float: right;
max-width: 100%;
height: 130px;
margin-right: 20px;
}
.page-title {
text-align: center;
margin-bottom: 30px;
font-family: "Libre Baskerville";
}
.about-container {
place-items: center;
margin: 10px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.about-container p {
font-size: 16px;
padding-right: 10px;
margin-left: 20px;
}
.about-container button {
margin-left: 20px;
}
.menu-text {
text-align: center;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 20px;
}
.menu-container {
display: flex;
justify-content: center;
background: #3d5777;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 20px;
}
.fa-chevron-left {
font-size: 30px;
float: left;
margin-right: 200px;
margin-top: 300px;
color: #fff;
}
.fa-chevron-right {
font-size: 30px;
float: left;
margin-left: 200px;
margin-top: 300px;
color: #fff;
}
.menu-container img {
max-width: 100%;
height: 650px;
margin: 10px;
}
iframe {
margin-top: 40px;
float: right;
margin-right: 100px;
width: 600px;
box-shadow: 1px 1px 1px 1px grey;
}
.contact {
background: #3d5777;
width: 400px;
height: 200px;
color: #fff;
margin-left: 120px;
margin-top: 160px;
place-items: center;
justify-content: center;
padding-top: 30px;
}
.contact p {
margin-bottom: 5px;
}
.fas {
margin-bottom: 5px;
font-size: 16px;
}
/* Footer */
footer {
width: 100%;
text-align: center;
background: #192534;
padding: 10px;
}
footer h2 {
color: #fff;
font-size: 14px;
}
footer a {
color: #8abeff;
}
<header>
<nav>
<a href="">
<h3 class="logo">Chef Italia</h1>
</a>
<div class="nav-links">
<a class="current" href="index.html">Home</a>
About Us
Menu
Contact
</div>
</nav>
</header>
<div class="showcase">
<div class="img-container">
<img src="img/home-showcase.jpg" alt="Photo of Italian cheese on wooden board">
</div>
<div class="text-container">
<h1>Welcome to Chef Italia</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<button class="btn-primary">Find out more</button>
</div>
</div>
</div>
<div class="showcase-2">
<div class="img-container-2">
<img src="img/authenic-italian.png" alt="Photo of 2 pizzas on plates with glasses of water and cutlery on a table">
</div>
<div class="text-container-2">
<h1>Authentic Italian Food</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-secondary">View Our Menu</button>
</div>
</div>
<div class="showcase">
<div class="img-container">
<img src="img/good-food-picture.jpeg" alt="Photo outside of resteraunt with green leaf tree covering one third of the yellow building">
</div>
<div class="text-container">
<h1>Good Food Awards Winner 2019</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-primary">Find Out More</button>
<div class="img-good-food">
<img src="img/good-food.png" alt="Good Food Awards Logo">
</div>
</div>
</div>
<footer>
<h2>© Chef Italia 2021. Designed and developed with 💙 by Tyler Lechowski</h2>
</footer>
Did you try to just add:
.img-container {
position:relative
}
.img-container img {
height: 100%;
width: 100%;
}
To define image size you can add for example:
.img-container {
position:relative;
width: 200px;
height: 200px;
}
but be sure you add it to .img-container, not .img-container img. In .img-container you define size in pixels but in .img-container img you make it 100% for width and height to fill whole container
Try adding this:
.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
height: 100%;
min-width: 100%;
object-fit: cover;
position: absolute;
}
Oveflow hidden to hide any part of the picture that comes outside the container. Object-fit cover to make it cover the container. If you want smaller picture just specify height and width on the container.
Below i write the code, in this code i want to make responsive 'rectangle' and 'square' and i also want to make resopnsive text in the p tag.
#rectangle
{
display: flex;
width: 500px;
height: 150px;
background-color: brown;
}
#square
{
width: 300px;
height: 130px;
background-color: chocolate;
margin: 10px;
}
<div id="rectangle">
<div id="square">
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, iusto. Sapiente fugiat illo
dolorum assumenda commodi!
</p>
</div>
For the widths and heights, use % instead of px. For the text, add an id or class that defines a font using the vw unit. For example:
<div id="rectangle">
<div id="square">
</div>
<p id='text'>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, iusto. Sapiente
fugiat illo dolorum assumenda commodi!
</p>
</div>
#rectangle
{
background-color: brown;
display: flex;
height: 8%;
position: relative;
width: 10%;
}
#square
{
background-color: chocolate;
height: 8%;
margin: 10px;
position: relative;
width: 10%;
}
#text
{
font-size: 2vw;
}
Here you go. If you want responsiveness, use % or vh / vw
#rectangle
{
display: flex;
width: 70vw;
height: 40vh;
background-color: brown;
font-size: 2.3vw;
}
#square
{
width: 100%;
height: 100%;
background-color: chocolate;
margin-right: 3%;
display: flex;
align-items: center;
justify-content: center;
}
.arrow-up {
display: flex;
align-items: center;
justify-content: center;
width: 0;
height: 0;
border-left: 10vw solid transparent;
border-right: 10vw solid transparent;
border-bottom: 10vw solid black;
}
<div id="rectangle">
<div id="square">
<div class="arrow-up"></div>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, iusto. Sapiente fugiat illo
dolorum assumenda commodi!
</p>
</div>