Media Queries and JS responsive navbar not fonctionnig - javascript

Got 2 problems with my index.html page and I will be thankfull to every person who will help me get rid of it. So, first my responsive nav doesn't work even if the js link is correctly written.
And, my media queries does not have any effect, I want to hide the aside for ipad and mobile users. THANK YOU
let toggle = document.querySelector('.toggle');
let body = document.querySelector('body');
toggle.addEventListener('click', function() {
body.classList.toggle('body');
});
body {
background-color: #C6EFE9;
}
.banner {
width: 100%;
background-image: url(../img/banner.jpg);
background-repeat: no-repeat;
margin-top: 75px;
height: 350px;
background-position: center;
background-attachment: scroll;
}
aside{
max-width: 50%;
float: right;
height: auto;
margin-right: 50%;
text-align: center;
margin: 50px;
padding: 50px;
font: serif;
}
aside li {
list-style: none;
text-align: left;
}
.apercus {
position: relative;
background-color: rgba(255, 255, 255, 0.5);
max-width: 50%;
height: 250px;
margin: 50px;
border: 2px solid rgba(81, 136, 151, 1);
cursor: pointer;
transform: translate3d(10%);
box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
border-radius: 10px;
}
img {
max-width: 50%;
height: 250px;
float: left;
padding-right: 20px;
border-radius: 10px;
}
.texte {
padding: 20px;
font-family: 'Sacramento', cursive;
}
.lien {
position: absolute;
height: 100%;
width: 100%;
z-index: 10;
}
.lien a {
display: block;
}
#media all and (max-width: 600){
aside {
display: none;
}
.apercus {
position: relative;
background-color: rgba(255, 255, 255, 0.5);
max-width: 100px;
height: 200px;
margin: 50px;
border: 2px solid rgba(81, 136, 151, 1);
cursor: pointer;
transform: translate3d(10%);
box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
border-radius: 10px;
}
}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Page d'accueil</title>
<!------------------------------COMPATIBILITIES------------------------------>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!---------------------------------FONTS-------------------------------------->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Sacramento&display=swap" rel="stylesheet">
<!---------------------------------------ICONS------------------------------->
<script src="https://kit.fontawesome.com/2942c11df3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<nav>
<i class="fas fa-pen-alt"></i> Lilaby
<div class="toggle">
<i class="fas fa-bars ouvert"></i>
<i class="fas fa-times ferme"></i>
</div>
<ul class="menu">
<li>Accueil</li>
<li>Blog</li>
<li>Quizs</li>
<li>Outils</li>
<li>Contacts</li>
<li><button class="btn">Connexion</button></li>
</ul>
</nav>
</header>
<div class="banner"></div>
<aside>
<h2>FAQ</h2>
<ul>
<li>Lilaby c'est quoi ? </li>
<br>
<li>Comment prendre RDV ?</li>
<br>
<li>Pourquoi nous ? </li>
<br>
<li>Actulités</li>
<br>
<li>Prochains événements</li>
</ul>
</aside>
<div class="apercus">
<div class="lien">
</div>
<div class="image">
<img src="img/article.jpg" alt="Image de l'article 1">
</div>
<div class="texte">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
</div>
<div class="apercus">
<div class="lien">
</div>
<div class="image">
<img src="img/quiz.jpg" alt="Image de l'article 1">
</div>
<div class="texte">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
</div>
<div class="apercus">
<div class="lien">
</div>
<div class="image">
<img src="img/outils.jpg" alt="Image de l'article 1">
</div>
<div class="texte">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
</div>
</body>
<script type="text/javascript" href="js/header.js"></script>
</html>


Your forget px on #media all and (max-width: 600), #media all and (max-width: 600px`)
<script> tag place is wrong. Correct Place: <script src="js/header.js"></script> </body>
</html>


Add px on media query.
You are toggling "body" class in js but you don't have ".body" class in css you're using body tag.

Related

Owl-Carousel Slideshow on Website not appear as single item

I've been trying to fix this error by setting the Js up like the Items, the loops or else and also i try to edit the container in the CSS or even the slider-items but all seems not working out. since it's ended up showing all the list instead one by one. So, as the result, it stretched the website up.
here's my code :
$(document).ready(function() {
//for testimonial
var owl = $('.owl-testmonial');
owl.owlCarousel({
items: 1,
loop: true,
nav: true,
margin: 10,
autoplay: true,
autoplayTimeout: 2500,
autoplayHoverPause: true
});
});
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.testmonial {
background-image: url(images/testimonial-bg.jpg);
position: relative;
background-repeat: no-repeat;
}
.testmonial:after {
content: "";
background: #1baaba;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .6;
z-index: 1;
}
.owl-wrapper {
padding: 80px 20px;
z-index: 999;
position: relative;
}
.owl-testmonial {
background: #FFF;
max-width: 400px;
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testmonial:before {
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
text-align: center;
display: block;
font-size: 92px;
color: #e7e7e7;
margin-top: -106px;
}
.owl-testmonial .owl-prev {
position: absolute;
left: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
line-height: 17px !important;
color: #FFF;
}
.owl-testmonial .owl-next {
position: absolute;
right: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
color: #FFF;
line-height: 17px !important;
}
nav {
overflow: hidden;
background-color: #333;
}
nav.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
}
nav li {
margin: 0 30px;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ffeb3b;
color: black;
}
a.active {
background-color: #2196f3;
color: white;
}
.content {
padding: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
background-color: #fff;
width: 30%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
float: left;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #ffeb3b;
color: #2196f3;
border-radius: 10px;
border: 1px solid #2196f3;
margin-top: 20px;
cursor: pointer;
}
.office-map {
margin-top: 50px;
}
/* Responsive styles */
#media screen and (max-width: 992px) {
nav li {
margin: 0 10px;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 80%;
}
}
#media screen and (max-width: 768px) {
header {
height: 60vh;
}
nav {
top: 60vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 90%;
}
}
#media screen and (max-width: 576px) {
header {
height: 40vh;
}
nav {
top: 40vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 95%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add JS for owl carousel -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>My Homepage</title>
</head>
<body>
<div class="testmonial">
<div class="container">
<div class="owl-wrapper">
<div class="owl-carousel owl-testmonial">
<div class="slide-item">
<img src="testimony/slider1585663811.png" alt="Slide 1">
</div>
<div class="slide-item">
<img src="testimony/slider1589942091.png" alt="Slide 2">
</div>
<div class="slide-item">
<img src="testimony/slider1590030001.png" alt="Slide 3">
</div>
</div>
</div>
</div>
</div>
<!-- 7 items sticky menu bar -->
<nav id="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>About Us</li>
<li>Tabungan</li>
<li>Kredit</li>
<li>Deposito</li>
<li>Berita</li>
<li>Pengajuan Kredit</li>
</ul>
</nav>
<main class="content">
<!-- 3 static benefits -->
<section class="benefits">
<div class="card">
<h3>Benefit 1</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 2</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 3</h3>
<p>Description</p>
</div>
</section>
<!-- 3 types of product -->
<section class="products">
<h2>Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>
<!-- ID tracking -->
<section class="id-tracking">
<h2>ID Tracking</h2>
<p>Description</p>
</section>
<!-- 3 dynamic testimonies -->
<section class="testimonies">
<h2>Testimonies</h2>
<div class="owl-carousel owl-theme">
<div class="testimony-1">Testimony 1</div>
<div class="testimony-2">Testimony 2</div>
<div class="testimony-3">Testimony 3</div>
</div>
</section>
<!-- 4 dynamic slider of news -->
<section class="news">
<h2>News</h2>
<div class="owl-carousel owl-theme">
<div class="news-1">News 1</div>
<div class="news-2">News 2</div>
<div class="news-3">News 3</div>
<div class="news-4">News 4</div>
</div>
</section>
<!-- suggestion box -->
<section class="suggestion-box">
<h2>Suggestion Box</h2>
<form action="#">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phone-number">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">Submit</button>
</form>
</section>
<!-- static map to the office -->
<section class="map">
<h2>Map to the Office</h2>
<img src="map.jpg" alt="Map to the Office">
</section>
</main>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
<script>
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>

Use the tried and true troubleshooting technique for isolating a problem. Save your code. Then remove everything unrelated to the carousel and see if it works. It does! (run the snippet below). Now add back your code in sections until it stops working, then you’ll know where the problem is.
$(document).ready(function() {
//for testimonial
var owl = $('.owl-testmonial');
owl.owlCarousel({
items: 1,
loop: true,
nav: true,
margin: 10,
autoplay: true,
autoplayTimeout: 2500,
autoplayHoverPause: true
});
});
body {
font-family: Arial, sans-serif;
margin: 0;
}
.owl-testmonial {
background: #FFF;
max-width: 400px;
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testmonial .owl-prev {
position: absolute;
left: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
line-height: 17px !important;
color: #FFF;
}
.owl-testmonial .owl-next {
position: absolute;
right: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
color: #FFF;
line-height: 17px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
</head>
<body>
<div class="owl-carousel owl-testmonial">
<div class="slide-item">
<img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg" alt="Slide 1">
</div>
<div class="slide-item">
<img src="https://llandscapes-10674.kxcdn.com/wp-content/uploads/2019/07/lighting.jpg" alt="Slide 2">
</div>
<div class="slide-item">
<img src="https://img.freepik.com/free-vector/nature-scene-with-river-hills-forest-mountain-landscape-flat-cartoon-style-illustration_1150-37326.jpg" alt="Slide 3">
</div>
</div>
</body>

Having some trouble with particle JS pushing elements to the side

I've imported particle JS into this html file and other files, instead of the particles being in the background the canvas pushes the other elements to the left of the webpage,can anyone help me out with it? Not sure what I am doing wrong in the css and or html perhaps I need to change the class of the canvas element? Thanks in advance.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz - Play</title>
<link rel="stylesheet" href="style.css" />
<script src="/particles.min.js"></script>
<link rel="stylesheet" href="game.css" />
</head>
<body id="particles-js" class="canvas">
<div class="container">
<div id="loader"></div>
<div id="game" class="justify-center flex-column hidden">
<div id="hud">
<div id="hud-item">
<p id="progressText" class="hud-prefix">Question</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>
<div id="hud-item">
<p class="hud-prefix">Score</p>
<h1 class="hud-main-text" id="score">0</h1>
</div>
</div>
<h2 id="question"></h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<div class="choice-text" data-number="1"></div>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<div class="choice-text" data-number="2"></div>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<div class="choice-text" data-number="3"></div>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<div class="choice-text" data-number="4"></div>
</div>
</div>
</div>
<script src="/game.js"></script>
<script src="/particles.js"></script>
<script src="/app.js"></script>
</body>
</html>
CSS
.choice-container {
display: flex;
margin-bottom: 0.5rem;
width: 100%;
font-size: 1.8rem;
border: 0.1rem solid rgb(86, 165, 235, 0.25);
background-color: white;
}
.choice-prefix {
padding: 1.5rem 2.5rem;
background-color: var(--color-sec);
color: white;
}
.choice-text {
padding: 1.5rem;
width: 100%;
}
.choice-container:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.correct {
background-color: #28a745;
}
.incorrect {
background-color: #dc3545;
}
/* HUD */
#hud {
display: flex;
justify-content: space-around;
}
.hud-prefix {
text-align: center;
font-size: 2rem;
}
.hud-main-text {
text-align: center;
}
#progressBar {
width: 20rem;
height: 4rem;
border: 0.3rem solid #56a5eb;
margin-top: 1rem;
}
#progressBarFull {
height: 3.4rem;
background-color: #56a5eb;
width: 0%;
}
/* LOADER */
#loader {
border: 1.6rem solid white;
border-radius: 50%;
border-top: 1.6rem solid #56a5eb;
width: 12rem;
height: 12rem;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

JQuery UI button style not appearing in Dialog box

The buttons inside a dialog box is not appearing in JQuery UI Style whereas the outside buttons are getting stylised.
Here is my piece of code where i think i'm doing wrong-
$("#addSection").button().click(function(){
$('#sectionDialog').dialog({
buttons:{
"Add New Section":function(){},
"Cancel": function(){}}
});
});
Inside Dialog Box-
Here is the problem
Outside Dialog Box-
Appering perfectly outside dialog box
Edit:
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Daily Tasks</title>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery/external/jquery/jquery.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
My CSS Code:
body{
background-color: #19456b;
}
h2{
text-align: center;
color: #d89216;
font-family:'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr{
margin: 0;
color: #d89216;
}
button:focus{outline:none !important;}
.container-fluid{
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255,214,75);
background-color: blanchedalmond;
}
ol li{
padding: 2px;
cursor: grabbing;
}
ol li:hover{
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox
{
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection
{
text-align: right;
margin: 12px 2px;
}
.addTask
{
text-align: right;
margin: 12px 2px;
}
#sectionDialog{
display: none;
}
#taskDialog{
display: none;
}
.ui-icon-close
{
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
Thanks is advance!

Consider adjusting your head like so:
<!-- CSS Stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link rel="stylesheet" href="styles.css" />
The order that they load in is important.
$(function() {
$("#addSection").button().click(function() {
$('#sectionDialog').dialog({
buttons: {
"Add New Section": function() {},
"Cancel": function() {}
}
});
});
});
body {
background-color: #19456b;
}
h2 {
text-align: center;
color: #d89216;
font-family: 'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr {
margin: 0;
color: #d89216;
}
button:focus {
outline: none !important;
}
.container-fluid {
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255, 214, 75);
background-color: blanchedalmond;
}
ol li {
padding: 2px;
cursor: grabbing;
}
ol li:hover {
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox {
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection {
text-align: right;
margin: 12px 2px;
}
.addTask {
text-align: right;
margin: 12px 2px;
}
#sectionDialog {
display: none;
}
#taskDialog {
display: none;
}
.ui-icon-close {
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>

Some part of my Website's CSS is not being implemented when uploaded on Github pages?

I recently made a simon game using JS,HTML5,CSS3 and Bootstrap v4.5.Now the issue occurs on phones i.e. when display of viewport is below 726px.While testing locally on Chrome developer tools the site looks the way I want the website to look.Below is the image on Chrome developer tools
https://www.flickr.com/photos/189671520#N03/50243919798/in/dateposted/
Below is the screenshot of the same page taken on actual pone https://www.flickr.com/photos/189671520#N03/50244763957/in/dateposted/
The key difference is on the edge of each color ,the border radius as well as the border color black is not being applied !. Looking forward for help.
the code for CSS is
body {
text-align: center;
font-family: "Press Start 2P", cursive;
background-color: #011f3f;
color: #fef2bf;
}
.btn {
margin: 3px 0px;
display: inline-block;
height: 210px;
width: 210px;
border: 10px solid black;
border-radius: 20%;
padding: 0px;
}
.btn-close:nth-child(odd) {
text-align: right;
}
.btn-close:nth-child(even) {
text-align: left;
}
.btn-close {
padding: 7px 10.5px;
}
footer {
font-size: 1rem;
margin: 0 0 1% 0;
}
.game-over {
background-color: red;
opacity: 0.8;
}
#level-title {
font-size: 2.85rem;
margin: 2% 5%;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
.simon-rules {
color: #fef2bf;
text-decoration: none;
}
.simon-rules:hover {
color: red;
text-decoration: none;
}
/*****************************************colors*****************************************/
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
#media (max-width: 726px) {
.btn {
margin: 0px;
height: 86px;
width: 86px;
border: 5px solid black;
}
.btn-close {
padding: 5px 2.5px;
}
footer {
margin-bottom: 5%;
}
#level-title {
height: 70px;
font-size: 1.85rem;
margin: 4% 5%;
}
}
the code in HTML is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Simon</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet"
/>
</head>
<body>
<h1 id="level-title">Press Me To Start</h1>
<div class="container">
<div class="row">
<div class="col-6 btn-close">
<div type="button" id="green" class="btn green"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="red" class="btn red"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="yellow" class="btn yellow"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="blue" class="btn blue"></div>
</div>
</div>
</div>
<footer class="fixed-bottom">
<a
href="https://www.youtube.com/watch?v=1Yqj76Q4jJ4"
class="simon-rules"
target="_blank"
>What is Simon Game?</a
><br />
© Yash Salvi
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
If possible can anyone also help me know that on phone when user clicks on my "Press me to Start" i.e. on "h1" then I have used "h1" as a button and assigned the onclick function to it.Now the problem is that when user taps say on the "Press" it gets copied and browser asks if I want to do google search of the clicked word.
I want this "click to google search on any word" disabled.
[Text](https://raxy45.github.io/SIMON_GAME/) Link to github page

White vertical line on left side of screen

I'm creating a website, and when adding a background image to my CSS there appears to be a random white vertical line on the left side of the screen. I've checked this in both Chrome and Safari browsers. Would anyone be able to help fix this and also explain how it originated?
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

The white line is because of the blockquote element, you can disable the white border by adding
blockquote {
border-left: none;
}

If I understand, it's the default border on blockquote from bootstrap. Just set border-left: none on an element you want to disable that. In this case, blockquote.construction
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

You are getting the unwanted border from Blockquote tag.
In your Css for of Blockquote class replace with below:
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
Note : Also I observed the white border is present in the slogan blockquote as well. The reason it is not visible as the background color there is white. But if you will inspect the element, you will see it there.
I will recommend to add a common class to all blockquote with
border-left: none;

Categories