Issue
while i was fixing up my website i noticed this odd thing happening: website is shown with a empty blank bar at the right. the background image is not covering it. if it helps, i work with a 2560 x 1600 resolution. i have also used this css layout generator: https://layout.bradwoods.io/customize
i have tried to fix this by changing website layout to my laptop's resolution but it only ended up turning wonky, with the left bar going farther then i wanted. i've also tried using background-repeat: repeat; but it didn't change anything.
here's the snippet, i dont know if the background will show properly.
<style type="text/css">
.body {
margin: 0;
padding: 64px;
line-height: 24m;
color: black;
width: 2560px;
height: 1600px;
}
.layout {
width: 1366px;
height: 768px;
display: grid;
grid:
"header header header" auto
"leftSide body rightSide" 1fr
"footer footer footer" auto
/ auto 1fr auto;
gap: 8px;
background-image: url("backgrounds/tumblr_mex6qjrEDw1rbvno1.png");
background-repeat: repeat
}
.header { grid-area: header;
height: auto;
width: auto;
}
#float {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-style: italic;
font-size:2em;
font-weight:bold;
color: #fff;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}
.leftSide { grid-area: leftSide;
width:auto;
border:2px groove pink;
margin-top:5px;
margin-bottom:5px;
height:auto;
padding:10px;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
background: rgb(255,244,248);
background: linear-gradient(180deg, rgba(255,244,248,1) 0%, rgba(255,214,229,1) 100%);
}
.body { grid-area: body;
margin: 0;
padding: 0;
line-height: 24m;
color: black;
width: 2560px
height: 1600px}
.rightSide { grid-area: rightSide;
width:auto;
border:2px groove pink;;
margin-top:5px;
margin-bottom:5px;
height:auto;
padding:10px;
box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;
background: rgb(255,244,248);
background: linear-gradient(180deg, rgba(255,244,248,1) 0%, rgba(255,214,229,1) 100%);
}
.footer { grid-area: footer; }<!DOCTYPE html>
<html>
<head>
<title> TOOME </title>
<link href="home.css" rel="stylesheet" type="text/css">
<body>
<section class="layout">
<div class="header"> <div id="float"> <img src="images/toomenutsbetter.png" style="width:auto;height:288px;"> </div> </div>
<div class="leftSide"><center><img src="images/tumblr_ma31eljILG1qid2nw540.gif"></center> <p style="font-family: ms ui gothic;"> welcome to my super awesome pawsome
<br> website where i do what i want forever...
<br> (￣y▽￣)╭ ohohoho.....
<br>
<br> <img src= "images/construction.gif">
</div>
<div class="body"><P>i farted </P></div>
<div class="rightSide"><P>i farted really loud </P></div>
<div class="footer"> <P>i farted </P> </div>
</section>
</body>
</head>
</html>Solution
Do try with the below given changes in the body where you missed few syntax
.body {
margin: 0;
padding: 64px;
line-height: 24m;
color: black;
width: 2560px; /* Add semicolon */
height: 1600px; /* Add semicolon */
}
and do change the height and width in layout to 100
.layout {
width: 100%; /* Change to 100% */
height: 100%; /* Change to 100% */
/* other css */
}
Move the section tag to be a direct child of body tag.
<body>
<section class="layout">
<!-- Content goes here -->
</section>
</body>
Answered By - Aswath Cm
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.