Whenever I shrink my browser size all of my divs also resize despite the grid-columns being there as you can see when it is supposed to reach till the end of the page like normal div auto re-sizing I have used CSS grid and everything works fine in except for this problem as it will cause parts of the page to go black you will see what i mean when you visit the website (https://ift.tt/2MXzqrQ) it is supposed to look like this like this
The following is my HTML and CSS for the page.
/*
font-family: 'Anton', sans-serif; -----------------BOLD
font-family: 'Fjalla One', sans-serif; ------------REGULAR
*/
*{
margin: 0;
}
body{
background: black;
}
.logo{
font-size: 40px;
font-family: 'Anton', sans-serif;
color: #ffc800;
line-height: 100px;
}
.header {
grid-area: hd;
height: auto;
}
.header{
display: grid;
grid-template-columns: 700px 250px 250px 250px 250px auto;
grid-template-rows: 95px;
grid-template-areas: "hd hd hd hd hd";
font-family: 'Anton', sans-serif;;
font-size: 30px;
margin-bottom: 20px;
border-bottom: 2px solid #ffc800;
}
.header{
background: black;
}
.header a{
color: #ffc800;
text-decoration: none;
line-height: 100px;
}
.hme{
grid-column-start: 2;
}
.vids{
grid-column-start: 3;
}
.header a:hover {
-webkit-transition: all ease-in-out;
-moz-transition: all ease-in-out;
-ms-transition: all ease-in-out;
-o-transition: all ease-in-out;
transition: all ease-in-out;
color: transparent;
text-shadow: 0 0 1px rgba(255,255,255,0.9), 2px 0px 0px #00FFD7, -1px 0px 0px #FF0000;
padding: 0 0 0 -1px;
}
/*----------------------------------------------------------------*/
.main{
grid-area: mn;
}
.main{
display: grid;
grid-template-columns: 250px 500px 1fr 1fr;
grid-template-rows: 400px 400px;
grid-template-areas: "mn mn mn mn mn";
color: white;
margin-bottom: 50px;
}
video{
background: url(./clientback3);
overflow: auto;
}
.others{
color: #ffc800;
font-family: 'Anton', sans-serif;
font-size: 100px;
line-height: 700px;
z-index: 2;
grid-column-start: 2;
grid-column-end: 4;
min-width: 646.5px;
}
.artnam{
color: #ffc800;
font-family: 'Anton', sans-serif;
font-size: 50px;
grid-column-start: 2;
grid-column-end: 4;
z-index: 1;
min-width: 615.5px;
}
.mnvid:hover{
autoplay: 1;
}
/*-------------------------------------------------------------*/
.intro{
grid-area: int;
}
.intro{
display: grid;
grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px;
grid-template-rows: 20px 60px 50px 250px 80px;
color: #ffc800;
background: url(./clientback3.jpg);
}
.vpap{
grid-column-start: 1;
grid-column-end: 17;
grid-row-start: 2;
font-family: 'Anton', sans-serif;
font-size: 50px;
text-align: center;
text-decoration-style: underline;
padding-bottom: 20px;
}
.abtinf{
font-family: 'Fjalla One', sans-serif;
grid-row-start: 4;
grid-column-start: 2;
grid-column-end: 15;
font-size: 25px;
}
/*-----------------------------------------------------------*/
.recproc{
grid-area: rcp;
}
.recproc{
display: grid;
grid-template-columns: 250px 360px 360px 360px 360px;
grid-column-gap: 50px;
grid-template-rows: auto auto auto;
color: #ffc800;
font-family: 'Anton', sans-serif;
font-size: 25px;
background-image: url(projback.jpg);
}
.projtitle{
grid-column-start: 3;
text-align: center;
margin-bottom: 20px;
color: #ffc800;
font-family: 'Anton', sans-serif;
}
.firstvid{
grid-column-start: 2;
margin-bottom: 50px;
}
.secvid{
grid-row-start: 2;
grid-column-start: 3;
margin-bottom: 50px;
}
.thrdvid{
grid-row-start: 2;
grid-column-start: 4;
margin-bottom: 50px;
}
.frthvid{
grid-row-start: 3;
grid-column-start: 2;
margin-bottom: 50px;
}
.fthvid{
grid-row-start: 3;
grid-column-start: 3;
margin-bottom: 50px;
}
.sthvid{
grid-row-start: 3;
grid-column-start: 4;
margin-bottom: 50px;
}
/*---------------------------------------------*/
.wyus{
display: grid;
grid-template-columns: 300px 150px 250px 250px 250px 250px;
grid-template-rows: auto auto auto auto 75px;
background: url(./clientback3.jpg);
font-family: 'Anton', sans-serif;
color: #ffc800;
}
.whyustit{
grid-column-start: 2;
padding-top: 50px;
font-size: 50px;
padding-bottom: 25px;
}
.whyusinfop1{
grid-row-start: 2;
grid-column-start: 2;
grid-column-end: 6;
font-size: 25px;
padding-bottom: 20px;
font-family: 'Fjalla One', sans-serif;
}
.whyusinfop2{
grid-row-start: 3;
grid-column-start: 2;
grid-column-end: 6;
font-size: 25px;
padding-bottom: 35px;
font-family: 'Fjalla One', sans-serif;
}
.butcont{
grid-row-start: 4;
grid-column-start: 2;
font-size: 25px;
color: black;
text-decoration: none;
border: 2px #2a2a2a;
background: #2a2a2a;
color: white;
border-radius: 6px;
color: #ffc800;
}
.butcont:hover{
-webkit-transition: all ease-in-out;
-moz-transition: all ease-in-out;
-ms-transition: all ease-in-out;
-o-transition: all ease-in-out;
transition: all ease-in-out;
color: transparent;
text-shadow: 0 0 1px rgba(255,255,255,0.9), 2px 0px 0px #00FFD7, -1px 0px 0px #FF0000;
padding: 0 0 0 -1px;
border: 2px #ffc800;
background: #ffc800;
}
/*------------------------------------------------*/
.footer{
display: grid;
grid-template-columns: 250px 75px 250px 250px 250px 250px auto auto 1fr;
grid-template-rows: 100px 60px 100px;
background: black;
color: #ffc800;
font-family: 'Anton', sans-serif;
border-top: 2px solid #ffc800;
}
.follow{
grid-column-start: 2;
margin-top: 25px;
}
.instalogo{
grid-column-start: 2;
grid-row-start: 2;
height: auto;
width: 50px;
}
.insat{
grid-row-start: 2;
grid-column-start: 3;
font-size: 25px;
margin-top: 15px;
font-family: 'Fjalla One', sans-serif;
}
.devby{
grid-column-start: 7;
margin-top: 25px;
}
.jbdevlgo{
height: auto;
width: 500px;
grid-column-start: 7;
grid-column-end: 9;
grid-row-start: 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Murshed</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Fjalla+One" rel="stylesheet">
</head>
<body>
<div class="header">
<h1 class="logo">THEGREATMURSHED</h1>
<a href="./home.html" class="hme">Home</a>
<a href="./videos.html" class="vids">Videos</a>
<a href="./enquiry.html" class="enq">Enquiries</a>
<a href="./socials.html" class="schls">Socials</a>
<a href="./Photoshoots.html" class="phtos">Photoshoots</a>
</div>
<div class="main">
<video width="auto" height="800" controls="1" loop="5" autoplay="1" id="video1" allow="autoplay" muted="1">
<source src="./covervid.mp4" type="video/mp4">
</video>
<h1 class="others">GET RIGHT REMIX</h1>
<p class="artnam">Dockem & Malone ft. Ayo Beatz</p>
</div>
<div class="intro">
<h1 class="vpap">ABOUT US</h1>
<p class="abtinf">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit obcaecati quae modi amet at aperiam rerum facilis error impedit culpa. Magnam earum odio quia maxime minima, excepturi, at omnis dolorum delectus consectetur atque? Exercitationem ipsam possimus cupiditate aspernatur iure, dignissimos aperiam adipisci. Sapiente inventore quo dolorem labore quaerat ab quasi, at vel recusandae blanditiis eveniet iusto animi rem quia provident unde tempora sequi mollitia accusamus, sit vitae fuga et expedita. Non nulla pariatur numquam distinctio harum maxime doloremque est aspernatur suscipit ex, esse voluptatem. Laudantium explicabo incidunt ab, eum aperiam tenetur consequuntur odio, necessitatibus consequatur reprehenderit porro! Eius odit, possimus earum quasi architecto atque corrupti consequuntur sequi, nobis iste tempore ut rerum! Inventore adipisci, ex perspiciatis laudantium dicta natus rem eligendi, quae earum incidunt voluptates sapiente! Ipsa similique nobis unde illum sed esse earum in doloremque tenetur, fugiat fuga, facilis dolor quis accusamus, autem quasi eveniet incidunt natus consectetur ipsam.</p>
</div>
</script>
<div class="recproc">
<h1 class="projtitle">Projects</h1>
<iframe width="360" height="315" src="https://www.youtube.com/embed/Ztt1zS1EuIE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="firstvid">
</iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/EoeEmNrYJgo?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="secvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/iAMq_sXkXxA?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="thrdvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/Jb6huXOpkyc?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="frthvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/7ha6xYSOHeQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="fthvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/Atr-sLswEUE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="sthvid"></iframe>
</div>
<div class="wyus">
<h1 class="whyustit">Why Us</h1>
<p class="whyusinfop1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui perferendis aut exercitationem nobis vitae omnis totam eum vero tempore sit quod, vel porro sequi, dignissimos ut quidem maxime nulla. Praesentium placeat velit similique minima nam, quibusdam voluptates at veritatis, aliquam ratione, alias deleniti quaerat. Fuga neque reiciendis ipsa animi, vitae architecto iusto, at facere totam provident in enim aperiam quod.</p>
<p class="whyusinfop2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit reiciendis laboriosam debitis non est culpa sapiente incidunt eligendi consequatur totam exercitationem harum unde minima nesciunt cumque et quod molestias voluptates animi delectus dolores quasi voluptate, blanditiis iste. Fugit omnis, harum?</p>
<a href="./enquiry.html" class="butcont">Contact Us</a>
</div>
<div class="footer">
<h1 class="follow">Follow</h1>
<img src="./instalogo.png" class="instalogo">
<p class="insat">@thegreatmurshed</p>
<h1 class="devby">Developed By</h1>
<img src="./jbdevlogo.png" class="jbdevlgo">
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire