How do I remove these whitespaces of my site?
Question
I am making a shop for my server, the shop lets me edit only the css, which I am doing, but in the shop there is a giant white space to the right, top and bottom of the screen.
I tried looking for css solutions, non of them worked.
How do I fix this?
WEBSITE: http://purgepvp-mc.tebex.io/?theme=174117
**CSS*:*
@import url(http://fonts.googleapis.com/css?family=Lato;
@import url(http://fonts.googleapis.com/css?family=Futura);
.header {
background-size: cover;
padding: 20px;
margin: 0;
background-image: url("https://i.imgur.com/eFt7yL2.jpg");
}
.progress-bar {
background-color: #592e89
}
body > .container {
width: 100% !important;
padding: 0 !important;
background: #757575;
}
.panel-heading {
border-radius: 0px !important;
border: 0px !important;
height: 40px !important;
background-color: #592e89 !important;
color: #FFF !important;
border-radius: 0px !important;
}
.logo {
}
.panel {
border: none !important;
border-radius: 0px !important;
}
.panel-body {
color: #FFF !important;
border-radius: 0px !important;
background-color: #3a3a3a;
}
.content {
border: none !important;
}
.navbar {
border-radius: 1px;
color: white;
background-color: #592e89;
border: none !important;
}
.donation-goal {
font-weight: bold;
}
.nav {
margin: 0 auto;
text-align: center;
display: block;
width: max-content;
float: initial;'
font-weight: bold;'
}
.nav a, .nav li {
color: #FFF !important;
transition: all 0.2s linear;
text-decoration: none !important;
font-weight: bold;
}
.nav li:hover, .nav li:hover a {
background-color: #3a3a3a;
color: #FFF !important;
text-decoration: none !important;
border-radius: 20px;
font-weight: bold;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.logo img {
content: url('https://i.imgur.com/S7Lfi8X.jpg');
height: initial !important;
width: 600px;
margin: 0 auto;
display: block;
}
.logo {
width: 100% !important;
animation: pulse 3s infinite;
margin: 0 auto;
display: table;
margin-top: 50px;
animation-direction: alternate;
-webkit-animation-name: pulse;
animation-name: pulse;
}
.footer {
border-top: 5px solid #592e89;
background-color: #3a3a3a;
padding-bottom: 30px;
font-weight: bold;
}
2 answers
solution1
0 2018-09-30 06:40:33
There is a margin available by default, for example
<head>
title scripts etc.
</head>
<body>
<header class="...">your html</header>
<div class="..."></div>
</body>
Either give an id or class to the body and make margin = 0 in the body class or hard code
<body style="margin:0;">
<header class="...">your html</header>
<div class="..."></div>
</body>
This will prevent the white space.
solution2
0 ACCPTED 2018-09-30 06:51:57
Your logo caused this. Add this css
body .container {
overflow-x: hidden;
}
.container .body {
margin-right:0px;
margin-left:0px;
}
body {
margin-top: 0px !important; /*in your syle.min.css, it makes the margin-top:20px*/
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.