Я пытаюсь избавиться от пробелов в самом низу каждой страницы при загрузке на мобильное устройство.Я не могу найти, где это пространство определено или где его убрать или уменьшить.Это вообще возможно, или я ничего не могу сделать?
Также я хотел бы знать, есть ли проблема с моими сценариями, может быть?Кажется, все работает нормально, но все же хотел спросить.
*** {
box-sizing: border-box;
}
/*@font-face {
font-family: zcool;
src: url(https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou);
}*/
html,
body {
height: 100%;
/* defines the whole view area */
width: 100%;
/* defines the whole view area */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines the font for the whole webpage */
}
a {
text-decoration: none;
/* removes hyperlink decoration/line */
}
body {
padding: 0;
/* removes padding */
margin: 0;
/* removes margin */
border: 0;
/* removes border */
background-attachment: fixed;
/* fixes the background image */
background-size: 100% auto;
/* defines the size of the background image */
background-image: url("img/bg2.png");
/* defines the source of the background-image */
background-repeat: no-repeat;
/* keeps background image from repeating itself */
background-size: 100% 100%;
/* defines the size of the background image */
text-align: justify;
/* justifies all the text everywhere */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
body {
padding: 0;
/* removes padding */
margin: 0;
/* removes margin */
border: 0;
/* removes border */
background-attachment: fixed;
/* fixes the background image */
background-size: 100% auto;
/* defines the size of the background image */
background-image: url("img/bgm.png");
background-repeat: no-repeat;
/* keeps background image from repeating itself */
background-size: 100% 100%;
/* defines the size of the background image */
text-align: justify;
/* justifies all the text everywhere */
}
}
** .section h1,
h2 {
text-align: center;
/* centers headings inside of div */
/* parent */
}
h1 {
/*desktop*/
/* centers headings inside of div */
/* child */
text-align: center;
margin-left: auto;
margin-right: auto;
}
h2 {
/*desktop*/
/* centers headings inside of div */
/* child */
text-align: center;
margin-left: auto;
margin-right: auto;
text-decoration: underline;
}
code {
/*desktop*/
font-size: 20px;
/* font-size of code */
}
kbd {
/*desktop*/
font-family: "Times New Roman", Times, serif;
/* defines font */
font-size: 20px;
/* defines font size */
}
@media (max-width: 768px) {
/*mobile*/
code {
font-size: 10px;
/* defines font size */
}
}
@media (max-width: 768px) {
/*mobile*/
kbd {
font-family: "Times New Roman", Times, serif;
/* defines font */
font-size: 10px;
/* defines font size */
}
}
ul#horizontal-list {
list-style: none;
/* removes bullet from list */
}
ul#horizontal-list li {
display: inline;
/* ??? */
}
ul {
margin: 0;
/* removes space */
padding: 0;
/* removes space */
overflow: hidden;
/* ??? */
}
li {
float: center;
/* centers the list element */
}
li a {
display: block;
color: white;
/* color op hyperlink */
text-align: center;
/* centers text */
padding: 16px;
/* adds spacing around. good for buttons */
text-decoration: none;
/* removes any hyperlink decoration */
}
li a:hover {
background-color: red;
/* turns the background red when hovering over it with mouse */
}
.navbar {
position: fixed;
/* fixes the nav bar */
top: 0;
/* position where it is fixed */
/*height: 50px;*/
width: 100%;
/* defines width, 100% will always go edge to edge on screens */
background-color: black;
/* background color */
color: white;
/* text color */
text-align: center;
/* centers text */
left: 0;
/* ??? */
right: 0;
/* ??? */
z-index: 1;
/* ??? */
}
.navbar ul {
display: flex;
/* ??? */
align-items: center;
/* centers all the elements/items */
justify-content: center;
/* ??? */
list-style-type: none;
/* removes decoration */
margin-top: 0px;
/* removes spacing on top */
}
.header {
background-image: url(img/j.svg);
/* background image/graphic */
background-repeat: no-repeat;
/* keeps image from repeating */
background-size: 100% 78%;
/* sizes the image */
height: 100%;
/* positions the image */
width: 100%;
/* positions the image */
margin-top: 8%;
/* will add margin on top */
margin-bottom: -8%;
/* will add margin on bottom */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.header {
background-image: url(img/j.svg);
/* source of background image */
background-repeat: no-repeat;
/* keeps image from repeating */
background-size: 100% 78%;
/* sizes the image */
/*height: 100%; positions the image */
width: 100%;
/* positions the image */
margin-top: 19%;
/* will add margin on top */
margin-bottom: -8%;
/* will add margin on bottom */
}
}
.body {
/* defines body container/section (background) */
/* PARENT */
width: 90%;
/* defines width */
margin: auto;
/* centers */
padding: 0;
/* removes padding */
border: 0;
/* removes padding */
color: black;
/* text color */
padding-left: 5%;
/* spacing from screen to container/section */
padding-right: 5%;
/* spacing from screen to container/section */
overflow: hidden;
/* keeps text from going over container/section */
height: auto;
/* small text -> small body, big text -> big body */
}
.johnswork {
/* defines background image */
background-image: url(img/johnswork.svg);
/* source of background image */
background-repeat: no-repeat;
/* keeps image from repeating */
height: 20%;
/* sizes the image */
width: 100%;
/* sizes the image */
margin-bottom: 5%;
/* spacing between image and text */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.johnswork {
/* defines background image */
background-image: url(img/johnswork.svg);
/* source of background image */
background-repeat: no-repeat;
/* keeps image from repeating */
height: 20%;
/* sizes the image */
width: 100%;
/* sizes the image */
margin-bottom: 5%;
/* spacing between image and text */
}
}
.content {
/* defines section/container with actual material */
/* CHILD */
margin: auto;
/* centers section/container */
height: 100%;
/* defines height of section/container */
width: 90%;
/* defines height of section/container */
background-color: white;
/* background color of section/container */
color: black;
/* text color */
border-right: double;
/* adds double border on the right */
border-left: double;
/* adds double border on the left */
box-shadow: 0px -7px 15px 1px rgb(58, 62, 64);
/* defines shadow around section/container */
text-align: justify;
/* jsutifies text in container/section */
font-size: 30px;
/* defines font size */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
margin-top: 2%;
/* spacing between top of section/container and text/material */
padding-top: 5%;
/* boxes content inside body */
padding-bottom: 10%;
/* boxes content inside body */
padding-left: 5%;
/* boxes content inside body */
padding-right: 5%;
/* boxes content inside body */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.content {
margin: auto;
/* centers section/container */
height: 100%;
/* defines height of section/container */
width: 90%;
/* defines height of section/container */
background-color: white;
/* background color of section/container */
color: black;
/* text color */
border-right: double;
/* adds double border on the right */
border-left: double;
/* adds double border on the left */
box-shadow: 0px -7px 15px 1px rgb(58, 62, 64);
/* defines shadow around section/container */
text-align: justify;
/* jsutifies text in container/section */
font-size: 15px;
/* defines font size */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
margin-top: 2%;
/* spacing between top of section/container and text/material */
padding-top: 5%;
/* boxes content inside body */
padding-bottom: 10%;
/* boxes content inside body */
padding-left: 5%;
/* boxes content inside body */
padding-right: 5%;
/* boxes content inside body */
}
}
.social {
margin: auto;
/* centers section/container */
/* CHILD */
display: flex;
/* ??? */
justify-content: center;
/* center aligns content */
align-items: center;
/* center aligns content */
}
.social a img {
/* ONLY FOR CONTACT.HTML */
height: 150px;
/* height of image inside a link/href */
width: 150px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: none;
text-decoration: none;
/* removes any decoration from image links */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.social a img {
/* ONLY FOR CONTACT.HTML */
height: 50px;
/* height of image inside a link/href */
width: 50px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: none;
/* removes border */
text-decoration: none;
/* removes any decoration from image links */
}
}
a img {
/* EVERY IMG IN A LINK */
height: 150px;
/* height of image inside a link/href */
width: 150px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: 1px solid black;
/* defines border */
border-radius: 8px;
/* rounds borders */
text-decoration: none;
/* removes any decoration from image links */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
a img {
/* EVERY IMG IN A LINK */
height: 50px;
/* height of image inside a link/href */
width: 50px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: 1px solid black;
/* defines border */
border-radius: 8px;
/* rounds borders */
text-decoration: none;
/* removes any decoration from image links */
}
}
.floatl {
/*desktop*/
float: left;
/*aligns element/object;*/
margin-right: 15px;
/*spacing between right side of element/object and text*/
}
.floatr {
/*desktop*/
float: right;
/*aligns element/object;*/
margin-left: 15px;
/*spacing between left side of element/object and text*/
}
.floatc {
/*desktop*/
display: block;
/* centers image */
margin-left: auto;
/* centers image */
margin-right: auto;
/* centers image */
}
@media (max-width: 768px) {
/*mobile*/
.floatl {
float: left;
/*aligns element/object;*/
margin-right: 15px;
/*spacing between right side of element/object and text*/
}
}
@media (max-width: 768px) {
/*mobile*/
.floatr {
float: right;
/*aligns element/object;*/
margin-left: 15px;
/*spacing between left side of element/object and text*/
}
}
@media (max-width: 768px) {
/*mobile*/
.floatc {
display: block;
/* centers image */
margin-left: auto;
/* centers image */
margin-right: auto;
/* centers image */
}
}
.footer {
/* defines footer */
height: 50px;
/* defines height of footer */
width: 72%;
/* defines width of footer to match content/body section/container */
background-color: black;
/* background color of the footer */
color: white;
/* footer text color */
vertical-align: middle;
/* centers between top and bottom */
margin: auto auto 50px;
/* centers between left and right */
}
#copyright {
display: table;
/*displays as table inside section/container*/
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
}
#cpy {
display: table-cell;
/* displays as cell inside the table */
vertical-align: middle;
/* alignment of the cell */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!-- <link rel="stylesheet" type="text/css" href="stylesheet-m.css" media="handheld" /> -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou" rel="stylesheet">
<!-- <link rel="icon" type="image/x-icon" href="img/favicons/favicon.ico"/> -->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="javascript.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3711944124990656",
enable_page_level_ads: true
});
</script>
<meta name="description" content="My Personal Portfolio">
<title>John's Work | WELCOME</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
<header class="header">
<!-- background defined in stylesheet.css-->
</header>
<section class="body">
<section class="content">
<div class="johnswork">
<img src="img/johnswork.svg" alt="John's Work" style="text-decoration: none">
</div>
<section class="article1">
<h2> Article l</h2>
<h1>How to bypass LanSchool on School Computers</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla
eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer
quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada
magna, in suscipit purus.
</p>
<code>
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
</code>
<p>
<kbd>
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
</kbd>
</p>
</section>
</section>
</section>
<footer class="footer" id="copyright" style="text-align:center">
<div id="cpy">© DA COSTA JOAO (2019)</div>
</footer>
</body>
</html>