с использованием сетки bootstrap для адаптивного дизайна, но при уменьшении размера экрана нижний колонтитул теряется, и невозможно перемещаться вниз по странице. ниже показано, почему. html страница плюс стилизация из файла css и файла s css. мои попытки исправить это были: искать синтаксическую проблему в файле css, и я изменил фоновое изображение с тела на html безрезультатно. любая помощь приветствуется. https://jsfiddle.net/eojcam/htkxnywL/7/
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="images/favicon_nylon.ico" type="image/x-icon" />
<title>why</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- My styles for project0 -->
<link rel="stylesheet" href="css/styles_p0.css">
<!-- My sass styles for project0 -->
<link rel="stylesheet" href="css/variable_p0.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a class="navbar-brand" href="index.html">Home</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="why.html">Why</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="examples.html">Examples</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<h1></h1>
<h2>Drop That Pick!</h2> <!-- use of unicode for emoji -->
<p class="header_p">It's gonna happen anyway...😎</p>
</header>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<p>Several years ago, after returning from a position as Orchestral Guitarist on Royal Caribbean Cruise
Lines ship the "Monarch of the Seas,"</p>
<p>I decided to take some Classical Guitar lessons with a private
teacher. I learned how to play the guitar without a pick...</p>
...revealing some new possibilities.
Like playing Walking Bass Lines,
Chords, and Melody all at once!
</div>
</div>
</div>
</section>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<table>
<tr>
<th>Finger Style</th>
<th>Pick</th>
</tr>
<tr>
<td>Thumb and Fingers work independently.</td>
<td>Only one attack possible.</td>
</tr>
<tr>
<td>Invented first 😎 (technique has been developed for longer time.)</td>
<td>Reliance, such that if you drop it, (or don't have one),
means you are "out of business!"</td> <!--use of table -->
</tr>
</table>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p id="footer_p">Copyright © 2020 Joe Austin Mcintosh. All rights reserved.</p> <!-- id used -->
</div>
</footer>
</body>
</html>
css:
body{
padding-top:5rem;
background:url(/Users/king/proj_0/images/nylon_string_original.JPG) no-repeat center center fixed;
background-size: cover;
overflow: hidden;
color: #ffffff;
{box-sizing: border-box;}
}
div {
padding: 2px;
text-align: center;
}
h1, h2, h3, h4 {
color: #FFFF00;
}
h3 {
margin-top: 0;
margin-bottom: 0;
}
header {
margin-left: 1%;
margin-bottom: 1%;
}
p {
margin-bottom: 0;
}
table {
margin: 0 auto 0 auto;
border: 2px solid #ffffff;
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
}
th {
background-color: lightgray;
color: #6D2E0D;
}
ul {
list-style: none;
}
.header_p { /* use of class*/
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
.join {
padding:2px;
margin-top: -20px;
text-align: center;
}
.row > div {
padding-top:5rem;
color: #ffffff;
}
@media print {
.screen_only {
display: none;
}
}
.section_d {
padding: 2px;
margin-bottom: 0px;
font-family: Palatino, serif;
text-align:center;
}
#a_examples {
color: #ffffff;
}
#footer_p { /* use of id */
font-family: cursive;
padding-top:2px;
padding-left:4px;
padding-right: 2px;
margin-top: 0;
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
#p_examples {
text-align: center;
}
@media (min-width: 500px) { /* media query use */
h1::before {
content: "Finger Style Guitar Club";
}
}
@media (max-width: 499px) {
h1::before {
content: "Finger Style!";
}
}
с css:
$cap: small-caps; /* variable use*/
ul {
font-variant: $cap;
}
div {
ul { /* use of nesting*/
li a {
color: #ffffff;
}
}
}
%style { /* inheritance use */
border: 1px solid black;
padding: 1px;
margin: 0px;
}
.full_name {
@extend %style;
color: blue;
}
.age {
@extend %style;
color: blue;
}
.playing_style {
@extend %style;
color: blue;
}
.where {
@extend %style;
color: blue;
}