How do I fix unwanted side scrollbar? [duplicate]

How do I fix unwanted side scrollbar? [duplicate] - javascript

This question already has answers here:
DISABLE the Horizontal Scroll [closed]
(12 answers)
Closed 3 years ago.
So I'm back with my website, but this time a new problem has risen...
Now I was working with my website putting contents in since i had my layout only to realize there is a unnecessary side scroll bar. I really don't know what's causing it and it's just frustrating.
I tried retracing back my step but I couldn't find it.
note... anything that says bar is just a progress bar.
https://glitch.com/~triangular-trouser
var move1 = function() {}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.m-scene {
.scene_element {
animation-duration: .5s;
transition-timing-function: ease-in;
animation-fill-mode: both;
}
.scene_element--fadein {
animation-name: fadeIn;
}
.scene_element--fadeinup {
animation-name: fadeInUp;
}
.scene_element--fadeinright {
animation-name: fadeInRight;
}
&.is-exiting {
.scene_element {
animation-direction: alternate-reverse;
}
}
}
* {
box-sizing: border-box;
}
body {
font-family: "Times New Roman", Times, serif;
padding: 0px;
background: #ffffff;
}
.header {
padding: 20px;
text-align: left;
color: #565656;
}
.header h1 {
font-size: 50px;
text-align: right;
color: #565656
}
.header p {
color: #565656
}
.fullcolumn {
float: left;
width: 100%;
font-family: "Times New Roman", Times, serif;
background-color: #d7cec7;
}
.leftcolumn {
float: left;
width: 25%;
font-family: "Times New Roman", Times, serif;
margin-left: 10px;
background-color: #d7cec7;
}
.rightcolumn {
float: right;
width: 75%;
font-family: "Times New Roman", Times, serif;
margin-left: -10px;
background-color: #d7cec7;
}
.fakeimg {
background-color: #aaa;
width: 50%;
height: px;
padding: 20px;
border-radius: 5px;
}
.card {
padding: 20px;
margin-top: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.picalignment {
float: left;
width: 50%;
padding: 5px;
}
.next::after {
content: "";
clear: both;
display: table;
}
.imgfix {
overflow: auto;
}
.imgfix::after {
content: "";
clear: both;
display: table;
}
.mybiopic {
float:left;
margin: 10px;
}
#main {
transition: margin-left .5s;
}
.body {
transition: background-color .5s;
}
#myDiv {
transition: background-color .5s;
}
#myDiv4 {
transition: background-color .5s;
}
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#myProgress1 {
width: 100%;
background-color: #ffffff;
}
#myBar1 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress2 {
width: 100%;
background-color: #ffffff;
}
#myBar2 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress3 {
width: 100%;
background-color: #ffffff;
}
#myBar3 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress4 {
width: 100%;
background-color: #ffffff;
}
#myBar4 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress5 {
width: 100%;
background-color: #ffffff;
}
#myBar5 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress6 {
width: 100%;
background-color: #ffffff;
}
#myBar6 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress7 {
width: 100%;
background-color: #ffffff;
}
#myBar7 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
.filler {
background-color: #d7cec7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Thimble Sample</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
</html>
<html>
<div id="myDiv" class="m-scene">
<div id="main" class="m-aside scene_element scene_element--fadein">
<body onload="move1()" id="myDiv">
<script src="script.js"></script>
<div class="header" id="myDiv2">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Menu</span>
<h1>Digital Portfolio</h1>
<p style="text-align: right;">Taewoo Hong</p>
</div>
<div class="filler row m-right-panel m-page scene_element scene_element--fadeinright" id="filler">
<div class="leftcolumn">
<div class="card" id="myDiv4">
<h1 style="color: #76323F;">
<b>Skills</b>
</h1>
<h2 style="color: #ffffff;">
Adaptability
</h2>
<div id="myProgress1">
<div id="myBar1">10%</div>
</div>
<h2 style="color: #ffffff;">
Leadership
</h2>
<div id="myProgress2">
<div id="myBar2">10%</div>
</div>
<h2 style="color: #ffffff;">
Coding
</h2>
<div id="myProgress3">
<div id="myBar3">10%</div>
</div>
<h2 style="color: #ffffff;">
Art
</h2>
<div id="myProgress4">
<div id="myBar4">10%</div>
</div>
<h1 style="color: #76323F;">
<b>Languages</b>
</h1>
<h2 style="color: #ffffff;">
English
</h2>
<div id="myProgress5">
<div id="myBar5">10%</div>
</div>
<h2 style="color: #ffffff;">
Korean
</h2>
<div id="myProgress6">
<div id="myBar6">10%</div>
</div>
<h2 style="color: #ffffff;">
German(basic)
</h2>
<div id="myProgress7">
<div id="myBar7">10%</div>
</div>
</div>
</div>
<div class="rightcolumn">
<div class="card" id="myDiv5">
<h1 style="color: #76323F; text-align:right;">
<b>Contact Information</b>
</h1>
</div>
</div>
</div>
<div class="footer m-right-panel m-page scene_element scene_element--fadeinright" id="foot">
<h2>Footer</h2>
</div>
<div id="mySidenav" class="sidenav">
×
Home
Test
Clients
Contact
</div>
</body>
</div>
</div>
</html>

There's an extra negative margins on both sides of this div:
<div class="row m-page scene_element scene_element--fadeinup">
Removing both said margins from the row class seems to do the trick:
.row {
margin-left: 0;
margin-right:0;
}
You can create a class like Bootstrap 4:
.mx-0 {
margin-left: 0;
margin-right:0;
}

The scroll bars are called overflow, you can play around with it, even disable it directly. X and Y overflow for the x and y axis respectively. Have a look at this link fam, there may also be some other useful things for you there.
.someDiv{
overflow-x: hidden;
overflow-y: hidden;
}

Related

How to solve this problem with responsive - blank space on right side?

I'm teaching coding in Visual Studio Code, and I found some template and tried make website. After finishing coding I have problem with responsive which u can see on pictures. There is blank white space and I dont know how to fix it.
https://i.stack.imgur.com/8jvI4.jpg
I tried to change values on #media in CSS, but nothing changes. I would really like someone to help me so I know in future where I made a mistake. I also have this reset.css - that is bootstrap.
Thanks in regards.
/* for navigation*/
var dugme = document.getElementById('dugmeNav');
dugme.addEventListener('click',pokreni,false);
function pokreni() {
document.getElementById("myNav").classList.toggle("meni_sirina");
document
.querySelector(".meni-dugmici")
.classList.toggle("meni-dugmici_style");
}
/* FONTOVI */
#font-face {
font-family: 'Raleway';
src: url('../fontovi/Raleway.ttf');
}
#font-face {
font-family: 'Open Sans';
src: url('../fontovi/OpenSans.ttf');
}
#font-face {
font-family: 'Poppins';
src: url('../fontovi/Poppins.ttf');
}
#font-face {
font-family: 'Roboto';
src: url('../fontovi/Roboto.ttf');
}
/* KRAJ FONTOVA */
body {
font-family: 'Raleway', sans-serif;
color: #0c0c0c;
background-color: #ffffff;
}
.margine {
margin: 90px 0;
}
.padding {
padding: 90px 0;
}
.padding2 {
padding: 45px 0;
}
.padding2-top {
padding-top: 45px;
}
.padding2-bottom {
padding-bottom: 45px;
}
.padding-top {
padding-top: 90px;
}
.padding-bottom {
padding-bottom: 90px;
}
.naslovi h2 {
font-weight: bold;
color: #1d1e31;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.naslovi h2::before {
content: "";
width: 100px;
height: 1px;
background-color: #8547ca;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
}
.hero_next_section-margin {
margin-top: 100px;
}
/*header section*/
.omotac {
height: 100vh;
position: relative;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f7fd), color-stop(45%, #1d1e31));
background: linear-gradient(to right, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
height: auto;
}
#header_sekcija .sekcija {
padding-right: 25px;
padding-left: 25px;
}
#header_sekcija .nav_container {
margin: 0 auto;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link img {
width: 22px;
margin-right: 15px;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link {
padding: 0px 25px;
color: #fefeff;
text-align: center;
font-family: "Roboto", sans-serif;
}
.meni-dugmici {
z-index: 9;
position: absolute;
right: 15px;
top: 14px;
}
.meni-dugmici button {
margin-top: 12px;
outline: none;
border: none;
background-color: transparent;
}
.meni-dugmici span {
display: block;
width: 35px;
height: 5px;
background-color: #fff;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.meni-dugmici .meni-dugmici .s-2 {
-webkit-transition: all .1s;
transition: all .1s;
}
.meni-dugmici_style button {
position: fixed;
right: 29px;
top: 14px;
}
.meni-dugmici_style button .s-1 {
-webkit-transform: rotate(45deg) translateY(17px);
transform: rotate(45deg) translateY(17px);
}
.meni-dugmici_style button .s-2 {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.meni-dugmici_style button .s-3 {
-webkit-transform: rotate(-45deg) translateY(-17px);
transform: rotate(-45deg) translateY(-17px);
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 30px;
font-size: 60px;
}
.overlay a {
padding: 0px;
text-decoration: none;
font-size: 22px;
color: #f1f1f1;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay-sadrzaj {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.meni_sirina {
width: 100%;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a:hover,
a:focus {
color: initial;
}
.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navigacija-sekcija .nav_search-btn {
background-image: url(../slike/search-icon.png);
background-size: 18px;
background-repeat: no-repeat;
width: 35px;
height: 35px;
padding: 0;
border: none;
margin: 0 40px 0 15px;
background-position: center;
}
.navbar-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-logo img {
width: 40px;
margin-right: 5px;
}
.navbar-logo h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
color: #8547ca;
margin-top: 5px;
}
.navigacija-sekcija {
z-index: 99999;
padding: 15px 0;
}
.navigacija-sekcija .navbar-toggler {
outline: none;
}
.navigacija-sekcija .navbar-toggler .navbar-toggler-icon {
background-image: url(../slike/menu.png);
background-size: 55px;
}
.quote_btn-container a {
display: inline-block;
padding: 5px 15px;
background-color: #fc5d35;
color: #f7f7f7;
font-size: 14px;
text-transform: uppercase;
}
/*end header section*/
/* contact section */
.kontakt_sekcija {
background-color: #f2f7fd;
}
.kontakt_sekcija h3 {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.kontakt_sekcija .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kontakt_sekcija input {
border: none;
outline: none;
border-bottom: 1px solid #000;
width: 90%;
margin: 15px 0;
background-color: transparent;
}
.kontakt_sekcija input::-webkit-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input:-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_form-container #posaljiDugme {
border: none;
background-color: #8c60bd;
color: #fff;
font-size: 15px;
padding: 15px 45px;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
}
#kontaktnaslov {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.contact_img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_img-box img {
width: 100%;
}
/* end contact section */
/* info section */
.info_sekcija {
background-color: #363636;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding-left: 20px;
}
.info_sekcija h4 {
margin-bottom: 12px;
font-size: 22px;
}
.info_logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_logo-box h3 {
font-weight: bold;
padding: 5px 35px;
border-bottom: 1.5px solid #8547ca;
}
.info_sekcija ul {
padding: 0;
}
.info_sekcija ul li {
list-style-type: none;
margin: 3px 0;
}
.info_sekcija ul li a {
color: #ffffff;
}
.info_sekcija ul li a:hover {
color: #8547ca;
}
.info_sekcija .form_container input {
width: 225px;
height: 40px;
padding: 10px;
}
.info_sekcija .form_container::-webkit-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container:-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container .pretplataDugme {
background-color: #8c60bd;
border: none;
outline: none;
color: #fff;
padding: 8px 30px;
margin-top: 15px;
font-size: 15px;
text-transform: uppercase;
}
.mreze_container {
width: 95%;
margin: 0 auto;
border-top: 1px solid #898989;
padding: 25px 0;
}
.info_sekcija .social-box {
margin: 0 auto;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_sekcija .social-box img {
width: 35px;
margin-right: 5px;
}
/* end info section */
/* footer section*/
.footer_sekcija {
background-color: #8547ca;
padding: 20px;
}
.footer_sekcija p {
margin: 0;
text-align: center;
color: #fefdfc;
}
.footer_sekcija a {
color: #fefdfc;
}
#media (max-width: 1280px) {
.slajder_sekcija .img-box img {
height: auto;
width: 100%;
}
.slajder_sekcija .detalji-box h2 {
font-size: 4.5rem;
}
}
#media (max-width: 992px) {
.slajder_sekcija .detalji-box h2 {
font-size: 3.5rem;
}
.slajder_sekcija .detalji-box h3 {
font-size: 2rem;
}
.slajder_sekcija .carousel-control-prev {
top: 15px;
}
.slajder_sekcija .carousel-control-next {
bottom: 75px;
}
}
#media (max-width: 769px) {
.omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #f2f7fd 45%);
}
.omotac {
height: auto;
}
.meni-dugmici span {
background-color: #1d1e31;
}
.meni-dugmici_style button span {
background-color: #fff;
}
.carousel-indicators {
display: none;
}
.slajder_sekcija .img-box {
margin-top: 22.5px;
}
.slajder_sekcija .carousel-control-prev,
.slajder_sekcija .carousel-control-next {
display: none;
}
.skidanje_sekcija .main-img-box {
margin-top: 22.5px;
}
.onama_sekcija {
background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url("../slike/about-bg.jpg");
}
.onama_sekcija .detalji-box {
text-align: left;
height: auto;
}
.onama_sekcija .detalji-box.b-1 a {
margin: 0 auto;
}
.onama_sekcija .detalji-box.b-1 {
margin-bottom: 22.5px;
}
.info_sekcija .col-md-3 {
padding: 10px 12.50px;
text-align: left;
}
.contact_img-box {
margin-top: 22.5px;
}
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 500px;
}
.kol-desno {
margin: 50px 0px 0px 180px;
}
.b-3 p {
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
.b-4 p {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
}
#media (max-width: 576px) {
.kontakt_sekcija input {
width: 100%;
}
.info_sekcija .social-box {
width: auto;
}
}
#media (max-width: 400px) {
.slajder_sekcija .detalji-box h3 {
font-size: 1.5rem;
}
.slajder_sekcija .detalji-box h2 {
font-size: 2.5rem;
}
.pretplata_sekcija form {
flex-direction: column;
}
.pretplata_sekcija form input {
width: 100%;
height: 45px;
}
.pretplata_sekcija form .pretplataDugme {
width: 150px;
height: 45px;
line-height: 45px;
margin-top: 25px;
}
}
#media (max-width: 376px) {
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 250px;
padding: 0;
}
.kol-desno {
margin: 50px 0px 0px 50px;
padding: 0;
}
.b-3 p {
padding-top: 10px;
color: #FFF;
font-size: 17px;
}
.b-4 p {
margin-top: 20px;
color: #FFF;
font-size: 17px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Abdans - Kontakt</title>
<!-- slajder css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<!-- Header deo -->
<div class="omotac">
<header class="header_sekcija">
<div class="sekcija">
<nav class="navbar navbar-prosirenje navigacija-sekcija">
<div class="navbar-vracanje">
<div class="meni-dugmici">
<button id="dugmeNav">
<span class="s-1"> </span>
<span class="s-2"> </span>
<span class="s-3"> </span>
</button>
</div>
<div id="myNav" class="overlay">
<div class="overlay-sadrzaj">
POČETNA
O NAMA
ISKUSTVA KORISNIKA
KONTAKT
</div>
</div>
</div>
</nav>
<a class="navbar-logo" href="index.html">
<h1>
ABDANS
</h1>
</a>
</div>
</header>
<!-- Zavrsava se header deo -->
<!-- kontakt -->
<section class="kontakt_sekcija padding">
<div class="container">
<div class="d-flex ">
<h2 id="kontaktnaslov">
Kontaktirajte nas
</h2>
</div>
<div class="row">
<div class="col-md-6">
<form action="kontakt.php" method="get">
<div class="kontakt_form-container">
<div>
<div>
<input type="text" placeholder="Ime">
</div>
<div>
<input type="text" placeholder="Broj telefona">
</div>
<div>
<input type="email" placeholder="Email">
</div>
<div class="mt-5">
<input type="text" placeholder="Poruka">
</div>
<div class="mt-5">
<input type="submit" value="pošalji" id="posaljiDugme">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="contact_img-box">
<img src="slike/contact-img.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- zavrsavaju se kontakti -->
<!-- info -->
<section class="info_sekcija padding-top">
<div class="info_logo-box">
<h3>
ABDANS
</h3>
</div>
<div class="container padding2">
<div class="row">
<div class="col-md-3">
<h4>
O nama
</h4>
<p>
Firma se bavi prodajom BIO prehrambenih proizvoda.
</p>
</div>
<div class="col-md-3">
<h4>
Korisni linkovi
</h4>
<ul>
<li>
<a href="http://www.organiccentar.rs/prednosti/sta-organski-proizvodi.html">
Šta je BIO proizvod ?
</a>
</li>
<li>
<a href="#">
Kako preuzeti aplikaciju ?
</a>
</li>
<li>
<a href="onama.html">
O nama
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>
Kontaktirajte nas
</h4>
<p>
Kontaktirajte nas na svim društvenim mrežama, klikom na ikonicu ispod.
</p>
</div>
<div class="col-md-3">
<div class="pretplata_container">
<h4>
Newsletter
</h4>
<div class="form_container">
<form action="pretplata.php" method="post">
<input type="email" placeholder="Upišite vaš email" id="preplata_provera">
<input type="submit" value="Pretplati se" class="pretplataDugme">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mreze_container">
<div class="social-box">
<a href="#">
<img src="slike/fb.png" alt="">
</a>
<a href="#">
<img src="slike/twitter.png" alt="">
</a>
<a href="#">
<img src="slike/linkedin.png" alt="">
</a>
<a href="#">
<img src="slike/instagram.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- zavrsava se info -->
<!-- footer -->
<footer class="sekcija footer_sekcija">
<p>
© 2022 Sva prava zadržana. Napravljen od strane
Nikole Tešića
</p>
</footer>
<!-- zavrsava se footer -->
<!-- javasript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/reset.js"></script>
<script src="js/navigacija.js"></script>
</div>
</body>
</html>
Thanks in regards.

Try width: 100vw; in the body element(or the element that have background color)

div size after an eventlistener

I was working in this super simple project get really satisfied with the finish work but then CHAN! When I check the functionality of the app I noticed that the firs card, the one of the basic services get's bigger when the number change and also the third division line of the card change his size acting by himself when all the division lines are made it at once.
I was using SASS for this project but I don't think that was the problem in the compilation.
The problem is when I test the app in big screens
const switcher = document.querySelector("input");
switcher.addEventListener("click", () => {
const priceBasic = document.querySelector(".priceBasic");
const pricePro = document.querySelector(".pricePro");
const priceMaster = document.querySelector(".priceMaster");
if (switcher.checked == true) {
priceBasic.innerHTML = "$49.99";
pricePro.innerHTML = "$69.99";
priceMaster.innerHTML = "$89.99";
} else {
priceBasic.innerHTML = "$19.99";
pricePro.innerHTML = "$24.99";
priceMaster.innerHTML = "$39.99";
}
});
body, html {
height: 100%;
margin: 0;
}
body {
font-family: "Montserrat", sans-serif;
background: #f7f6ff;
display: grid;
justify-content: center;
}
.container {
max-width: 980px;
}
.switch {
position: relative;
display: block;
width: 65px;
height: 35px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
transition: 0.5s;
border: 3px solid white;
}
.slider:before {
position: absolute;
content: "";
bottom: 14px;
top: 3.1px;
background: #eeeded;
transition: 0.5s;
}
.switch input {
display: none;
}
input:checked + .slider {
background: #7466f5;
}
input:checked + .slider:before {
transform: translateX(35px);
}
.slider.round {
border-radius: 35px;
}
.slider.round:before {
width: 35%;
height: 75%;
border-radius: 50px;
}
.header-and-switch {
width: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
margin-bottom: 20%;
}
.header-and-switch h2 {
font-size: 1.75rem;
color: #524c85;
}
#media (min-width: 1100px) {
.header-and-switch h2 {
margin: 10px auto 0 auto;
}
}
#media (min-width: 1100px) {
.header-and-switch {
margin-bottom: 3%;
}
}
.switch-and-stuff {
display: flex;
}
.switch-and-stuff h4 {
margin: auto 25px;
color: #b3b5c6;
}
#media (min-width: 1100px) {
.cards-container {
display: flex;
flex-direction: row;
justify-content: center;
}
}
.card {
background: white;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
margin-bottom: 40px;
padding: 30px;
border-radius: 10px;
}
.card h4 {
color: #b3b5c6;
}
.card h1 {
color: #170f61;
font-size: 5rem;
margin: 0px auto 10px auto;
}
.card div {
width: 110%;
height: 1.8px;
background: #b3b5c6;
}
#media (min-width: 1100px) {
.card {
margin: auto 20px;
}
}
.btn {
-webkit-user-select: none;
user-select: none;
margin-top: 20px;
width: 105%;
height: 40px;
background: linear-gradient(115deg, #a3a8f0 35%, #696fdd 100%);
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
border-radius: 5px;
cursor: pointer;
}
.btn a {
color: white;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
}
.btn:focus, .btn.focus {
outline: 0;
}
.card:hover {
transition: 0.5s ease-out;
transform: scale(1.1, 1.1);
background: linear-gradient(115deg, #a3a8f0 35%, #696fdd 100%);
}
.card:hover h4, .card:hover h1 {
color: white;
}
.card:hover .btn {
background: white;
}
.card:hover .btn a {
color: #696fdd;
}
.card:hover .btn:hover {
text-decoration: none;
background-color: #696fdd;
}
.card:hover .btn:hover a {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700&display=swap" rel="stylesheet">
<title>Change the price</title>
</head>
<body>
<div class="container">
<div class="header-and-switch">
<h2>Our Pricing</h2>
<div class="switch-and-stuff">
<h4>Annually</h4>
<div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<h4>Monthly</h4>
</div>
</div>
<div class="cards-container">
<div class="card">
<h4>Basic</h4>
<h1 class="priceBasic">$19.99</h1>
<div></div>
<h4 class="features1">500 GB Storage</h4>
<div></div>
<h4 class="features">2 users Allowed</h4>
<div></div>
<h4 class="features">Send up to 3 GB</h4>
<div></div>
<button class="btn">LEARN MORE </button>
</div>
<div class="card">
<h4>Professional</h4>
<h1 class="pricePro">$24.99</h1>
<div></div>
<h4 class="features1">500 GB Storage</h4>
<div></div>
<h4 class="features">5 users Allowed</h4>
<div></div>
<h4 class="features">Send up to 10 GB</h4>
<div></div>
<button class="btn">LEARN MORE </button>
</div>
<div class="card">
<h4>Master</h4>
<h1 class="priceMaster">$39.99</h1>
<div></div>
<h4 class="features1">2 TB Storage</h4>
<div></div>
<h4 class="features">10 users Allowed</h4>
<div></div>
<h4 class="features">Send up to 20 GB</h4>
<div></div>
<button class="btn">LEARN MORE </button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>

what I would do:
the 2 prices are present on the interface but always with one or the other hidden.
example code of this system:
const AllPrices = document.querySelectorAll('h1.price')
priceToggle.onclick=_=>
{
AllPrices.forEach(p=>p.classList.toggle('annual'))
}
button {
display:block; margin:2em
}
.priceBlock {
display: inline-block;
margin: .5em;
padding: .7em;
font-size: 1.2em;
background-color: #85d5d8;
color: navy;
}
h1.price span {
display: block;
width: 100%;
float: left;
clear: both;
text-align: center;
overflow: hidden;
}
h1.price span:nth-of-type(2) { height:0; }
h1.price.annual span:nth-of-type(1) { height:0; }
h1.price.annual span:nth-of-type(2) { height:auto; }
<button id="priceToggle"> price toggle </button>
<div class="priceBlock">
<h1 class="price">
<span>$19.99</span>
<span>$500.99</span>
</h1>
</div>
<div class="priceBlock">
<h1 class="price">
<span>$23.99</span>
<span>$250.99</span>
</h1>
</div>

Creating a "tuck in" effect for nav bar items

I'm trying to create an effect where the nav bar items tuck in after you scroll down. This could be done effectively by increasing the bottom padding or decreasing the top padding. However, when I try to add this into my code, the transition does not show and nothing happens. An example of what I'm trying to create can be seen on this website.
My code so far can be seen in this fiddle.
$(document).ready(function() {
$(window).scroll(function() {
if($(document).scrollTop() > 10) {
$('#nav').addClass('shrink');
$('#menu1').removeClass('shrink');
}
else {
$('#nav').removeClass('shrink');
$('#menu1').removeClass('shrink');
}
});
});
/**********BODY GENERAL**********/
body {
margin: 0;
height: 2500px;
/* just to demonstrate how it will looks with content */
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* Fix this one day */
.bg-img {
height: 100vh;
width: 100%;
background: url('https://github.com/killerchef732/ItsAcademic/blob/master/images/Abkimage.JPG?raw=true');
background-size: cover;
background-position: center;
position: relative;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
#menu1 {
grid-column: 1;
padding-top: 0px;
padding-bottom: 0px;
}
#menu2 {
grid-column: 2;
padding-top: 0px;
padding-bottom: 0px;
}
#logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
padding-top: 0px;
padding-bottom: 0px;
}
#menu3 {
grid-column: 4;
padding-top: 0px;
padding-bottom: 0px;
}
#menu4 {
grid-column: 5;
padding-top: 0px;
padding-bottom: 0px;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: transparent;
z-index: 100;
transition: all ease .5s;
height: 70px;
position: relative;
z-index: 99;
}
/*============= NEW CSS RULES ============*/
/* #nav {
position: relative;
z-index: 99;
}
*/
#nav, #words{
height: 0px;
background: transparent;
display: block;
position: fixed;
width: 100%;
z-index: 99999;
transition: all ease .5s;
}
#words: {
font-size: 18px;
transition: all ease .5s;
}
#nav.shrink {
height: 80px;
transition: all ease .5s;
background: white;
}
#menu1.shrink{
padding-top: 0px;
transition: all ease .5s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<!-- Linking Jquery/Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="bg-img">
<header>
<div id="nav">
<!---- NEW BACKGROUND ELEMENT HERE ---->
<div class="background"></div>
<nav class="container">
<div id="menu1">
<a id="navLinks words" href="#home">Home</a>
</div>
<div id="menu2">
<a id="navLinks words" href="#upcoming">Tournaments</a>
</div>
<div id="logo">
<p>It's Academic</p>
</div>
<div id="menu3">
<a id="navLinks words" href="#history">History</a>
</div>
<div id="menu4">
<a id="navLinks words" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
</div>
</header>
<div class="Minfo">
<div class="subtitle">
CENTENNIAL<br>
<div class="title">
It's Academic
</div>
<br>
<div class="subtext">
Meets every Tuesday in Room 506
</div>
</div>
</div>
</div>
</body>
</html>
In my approach, the tuck-in should happen simultaneously with the nav bar transition as you can see in the javascript as they are grouped together. I can change that later.

Very nice looking site! Here's what you're looking for...
Just add this to your CSS and you're all set:
.shrink .container{
margin-top: -20px;
}
Of course you should adjust the -20px to whatever suits you!

"Contact Me" Button won't get smaller when page is resized

All the other elements of the page seem to resize whenever i make the window smaller, but it seems like the "Contact Me" Button seems to disappear whenever i resize the page, I've been trying to fix this problem for a while by changing the position of the button by itself, but it seems like nothing I've been doing has fixed the problem yet. Any help would be awesome thanks!
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" type= "text/css" href="css/style.css">
<title>Jaylen Cooper</title>
<body>
<div class="image_one" id="main">
<img src="http://d2tovwv1y8kfyq.cloudfront.net/wp-content/uploads/2016/07/28105929/tech3.jpg" class="image_one">
<h1>Hello, My Name Is Jaylen Cooper, And I Develop Websites and User Interfaces</h1>
</div>
<div>
<button id="myBtn" class="myBtn" align="middle">Contact Me</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>CONTACT INFORMATION</h3>
<form>
<label for="Email">Email Address</label>
<input type="text" name="Email"/>
<label for="Info">Brief Information</label>
<input type="text" name="lName"/>
<input type="submit" value="SUBMIT">
</form>
</div>
</div>
<div class="nav_body">
<h2><b><center>My Preferences</center></b></h2>
</div>
<div>
<img src="http://pluspng.com/img-png/coder-png-source-code-icon-1600.png" height="150px" class="image_One">
<img src="https://png.icons8.com/metro/540/graduation-cap.png" height="100px" class="image_Two">
<img src="http://www.freeiconspng.com/uploads/brain-2.png" height="150px" class="image_Three">
</div>
<div class="text_display">
<p1 id="text"><b>CODE</b></p1>
</div>
<div class="third_text">
<p5 id="text2"><b><br> The Best Languages that I know right now are<br> HTML,CSS,JavaScript,<br> and a basic ammount of Python<br> and Java.</b></p5>
<p4 id="text2"><b><br> &#9867<br> I'm always looking to collaborate <br> with other developers on other project<br>If you know any other coding communities <br>Feel Free To Contact Me.</b></p4>
<p6 id="text2"><b><br> &#9867<br> The Ideas that I usually have<br> are Website Based and Mobile,<br> Want To Pursue SQL.</b></p6>
</div>
<div class="fourth_box">
<h7><b>WORK</b></h7>
</div>
<div class="fifth_box">
<img src="http://www.freepngimg.com/thumb/coming_soon/4-2-coming-soon-png-thumb.png" class="coming_soon">
</div class="third_text">
<div class="About_Me">
<h9><b><center>ABOUT ME</center></b></h9>
</div>
<div class="aboutme_box">
<p id="aboutme_text"><b>I Live In Dallas,Texas <br>&#9867</b></p>
<p id="aboutme_text"><b>I'm 19 Years Old. <br>&#9867</b></p>
<p id="aboutme_text"><b>I've Been Coding For A Year. <br>&#9867</b></p>
<p id="aboutme_text"><b>Graduated High School In 2017. <br>&#9867</b></p>
<p id="aboutme_text"><b>Attending Community College For Computer Science 2018.<br>&#9867</b></p>
<p id="aboutme_text"><b>My Favorite Color Is Blue. <br>&#9867</b></p>
<p id="aboutme_text"><b>I Love Watching Twitch On My Down Time. <br> &#9867</b></p>
<p id="aboutme_text"><b>If You Would Like To Know More About Me Shoot Me A Email.</b></p>
</div>
<div class="Hyperlink_images">
<a href="https://twitter.com/slitheirings">
<img src="http://www.freeiconspng.com/uploads/twitter-icon--basic-round-social-iconset--s-icons-0.png" class="hyperlink_one" width="100px" id="hyperlink" href="https://twitter.com/slitheirings">
</a>
<a href="https://www.instagram.com/coop2824">
<img src="http://www.freeiconspng.com/uploads/instagram-logo-icon--icon-search-engine-5.png" class="hyperlink_two" width="100px" id="hyperlink" href="https://www.instagram.com/coop2824/">
</a>
<a href="https://www.facebook.com/profile.php?id=100004979988388">
<img src="https://cdn.worldvectorlogo.com/logos/facebook-3.svg" class="hyperlink_three" width="100px" id="hyperlink" href="https://www.facebook.com/profile.php?id=100004979988388">
</a>
<a href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" width="100px" id="hyperlink" href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
</a>
<a href="https://github.com/Slitherings">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" width="100px" id="hyperlink" href="https://image.flaticon.com/icons/svg/25/25231.svg">
</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/javascript_index.js"></script>
</body>
CSS
html, body{
margin: 0;
text-align: center;
top: 100%;
}
.nav_body{
height: 100px;
}
h1{
position: absolute;
font-family: sans-serif;
font-size: 52px;
text-align: center;
padding-left: 100px;
padding-right: 100px;
color: white;
top: 250px;
}
.image_one{
position:relative;
width: 100%;
height: 1080px;
opacity: 0.85;
}
.Contact_text{
color: white;
font-size: 24px;
top: 600px;
text-decoration: none;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 750px;
padding-top: 25px;
padding-bottom: 25px;
background-color: black;
opacity: 0.5;
transition-duration: 1s;
position: absolute;
}
.Contact_text:hover{
opacity: 1.0;
color: black;
background-color: white;
}
.Information_Text{
text-decoration: none;
color: white;
font-size: 16px;
position: absolute;
top: 710px;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 785px;
padding-top: 25px;
padding-bottom: 25px;
transition: 1s;
}
.Down_Arrow{
top: 750px;
position: absolute;
padding-left: 100px;
padding-right: 100px;
left: 490px;
}
.Main_Image{
position: absolute;
top: 70px;
padding-left: 100px;
padding-right: 100px;
left: 425px;
}
h2{
font-family: sans-serif;
font-size: 64px;
text-align: center;
}
.image_One{
padding-left: 20px;
padding-bottom: 50px;
}
.image_Two{
padding-left: 185px;
padding-bottom: 70px;
}
.image_Three{
padding-left: 170px;
top: 40px;
padding-bottom: 50px;
}
p1{
font-family:sans-serif;
text-decoration: none;
font-size: 64px;
color: white;
}
p2{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
p3{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
.text_display{
display: inline-block;
height: 55px;
padding-top: 25px;
background-color: cadetblue;
width: 100%;
text-align: center;
padding-bottom: 25px;
}
#text{
padding:200px;
}
.second_display{
height: 200px;
display: inline-block;
width: 100%;
}
p4{
font-family: sans-serif;
font-size: 14px;
left: 500px;
}
p5{
font-family: sans-serif;
font-size: 14px;
}
p6{
font-family: sans-serif;
font-size: 14px;
}
#text2{
}
.third_text{
display: inline-block;
padding-top: 50px;
padding-bottom: 50px;
}
.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;
height: 300px;
}
.prev, .next{
cursor: pointer;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8)
}
.text{
color:cadetblue;
font-size: 15px;
padding: 8px 12px;
bottom: 10px;
width: 100%;
text-align: center;
}
.numbertext{
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
top: 0;
}
.dot{
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display:inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
-webkit-animation-name:fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade{
from {opacity: .4}
to {opacity: 1.0}
}
#keyframes fade{
from{opacity: .4}
to {opacity: 1.0}
}
.fourth_box{
height: 85px;
background-color: cadetblue;
padding-bottom: 150px;
}
#keyframes slider{
0%{
left: 0;
}
20%{
left 0;
}
25%{
left: -100%;
}
45%{
left: -100%;
}
50%{
left: -200%;
}
70%{
left: -200%;
}
75%{
left: -300%;
}
95%{
left: -400%;
}
100%{
left: -400%;
}
}
#slider{
overflow: hidden;
max-width: 600px;
width: auto;
left: 3500px;
position: fixed;
}
#slider figure img{
width: 20%;
float: left;
}
#slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
h7{
font-size: 64px;
font-family: sans-serif;
color: white;
left: 0;
position: relative;
top: 100px;
}
.contact_background{
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
top: 0;
}
.About_Me{
padding-top: 50px;
height: 100px;
background-color: cadetblue;
}
h9{
font-family: sans-serif;
font-size: 64px;
text-align: center;
color: white;
}
h10{
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
.submit_button{
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.clicktoclose{
font-family: sans-serif;
font-size: 16px;
color: white;
text-decoration: none;
}
.coming_soon{
text-align: center;
left: 500px;
}
.fifth_box{
padding-top: 100px;
padding-bottom: 100px;
}
#aboutme_text{
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
}
.aboutme_box{
padding-top: 50px;
padding-bottom: 50px;
}
.Hyperlink_images{
height: 200px;
background-color: cadetblue;
padding:100px;
}
#hyperlink{
padding:100px;
}
.Email_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.Category_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.myBtn{
transition:background-color 1.5s ease;
position: absolute;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
left: 850px;
}
a{
text-decoration: none;
color: white;
font-weight: bold;
font-size: 15px;
}
.myBtn:hover{
background: cadetblue;
}
/* The Modal (background) */
.modal {
transition:background-color 1.5s ease;
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
input[type=text] {
transition:background-color 1.5s ease;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
font-family: sans-serif;
}
input[type=text]:focus {
background-color: coral;
opacity: 0.5;
}
label{
font-family: sans-serif;
font-weight: bold;
font-size: 26px;
}
h3{
font-family: sans-serif;
font-weight: bold;
font-size: 48px;
color: coral;
opacity: 0.4
}
input[type=button], input[type=submit], input[type=reset] {
transition:background-color 1.5s ease;
background-color: cadetblue;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
input[type=button], input[type=submit], input[type=reset]:hover{
background-color: coral;
opacity: 0.5;
font-family: sans-serif;
font-weight: bold;
}
Javascript
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var myopacity = 0;
function MyFadeFunction() {
if (myopacity<1) {
myopacity += .075;
setTimeout(function(){MyFadeFunction()},100);
}
document.getElementById('myModal').style.opacity = myopacity;
}
MyFadeFunction();
JSFiddle
Click if you want to see in browser
Again, any help would be great and it would really help me in the development of my portfolio website, I've been stuck on this problem for a while now. Thanks!

Nevermind, figured out the answer by readings Ben Kolya Mansleys, and Sergiu Post.
Thank you both for the help.
For Anyone That is wondering what i did
.myBtn{
transition:background-color 1.5s ease;
position: relative;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
align-items: center;
justify-content: center;
}
HTML
<div style="width:100%; height: 100%">
<button id="myBtn" class="myBtn" align="middle"><a href="#">Contact
Me</a></button>
</div>
Simply put the button inside a div then and styled it with width and height, and added align-items and justify-content centered in CSS.
Again Thanks Ben and Sergiu!

You are pushing the button off of the page with this:
.myBtn {
left: 850px;
}
You could try changing that line to something like this (adjust as necessary):
left: calc(110px + 8em);

HTML content layering on top of each other

Ive added some flip animations (javascirpt) to my grid of images. This has required me to add some extra css to style up the "back" div. The grid of images is now sitting behind the div.instagram element and in front of the footer element. When in responds down all of the divs layer on top of each other.
$(document).ready(function() {
$(".success").hide();
$("form").submit(function(e) {
e.preventDefault();
$("#wanttoplay").hide();
$(".success").show();
});
$(".successcollab").hide();
$("form").submit(function(e) {
e.preventDefault();
$("#collaborate").hide();
$(".successcollab").show();
});
$(document).on("click", ".flip-container", function() {
$(this).toggleClass('hover');
});
});
#font-face {
font-family: Geomanist-Regular;
src: url('fonts/Geomanist-Regular.otf');
}
#font-face {
font-family: Geomanist-Bold;
src: url('fonts/Geomanist-Bold.otf');
}
#header {
background-color: #000;
margin-bottom: 70px;
}
#header a {
color: #fff;
transition: color 0.5s;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
}
#header a span {
color: #ffffff;
border-bottom: 2px solid;
padding-bottom: 10px;
border-color: transparent;
transition: border-bottom 0.5s;
}
#header a span:hover {
color: #7ed321;
border-color: #7ed321;
}
#header .selected a span {
color: #7ED321;
}
#header img {
width: 40px;
margin-right: 10px;
display: inline-block;
vertical-align: top;
margin-top: -15px;
}
#header li {
margin-left: 30px;
font-size: 20px;
}
.navbar {
padding-top: 25px;
padding-bottom: 20px;
}
.navbar-header a {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
}
.navbar-brand {
font-size: 30px;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
border-bottom: none;
}
.navbar-inverse {
background-color: #000000;
}
.bottom {
padding-bottom: 20px;
}
.homepage-main {
min-height: 570px;
background-image: url('/images/mainimage.jpg');
background-repeat: no-repeat;
border-radius: 0px;
margin-bottom: 40px;
}
.vertical-text-main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -25%);
}
.wheredoweplay {
padding-top: 30px;
padding-bottom: 20px;
}
.wanttocollaborate {
padding-top: 30px;
}
.wanttoplay {
padding-top: 30px;
padding-bottom: 20px;
}
.instagram {
padding-top: 20px;
padding-bottom: 40px;
}
.instagram h2 {
padding-bottom: 20px;
}
.container2 {
position: relative;
filter: grayscale(0%);
transition: filter 1s;
}
.container2:hover {
filter: grayscale(100%);
}
.center {
position: absolute;
left: 0;
top: 88%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: color 1s;
}
.center:hover {
cursor: pointer;
color: #7ED321;
}
h3.centersmall {
position: absolute;
left: 0;
top: 76%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: color 1s;
}
h3.centersmall:hover {
cursor: pointer;
color: #7ED321;
}
img.playerpics {
width: 100%;
height: auto;
margin-bottom: 30px;
}
.alextext {
background-color: #000000;
margin-bottom: 30px;
color: #ffffff;
text-align: center;
padding-top: 30%;
padding-bottom: 23.5%;
padding-left: 30px;
padding-right: 30px;
}
.readmore {
cursor: pointer;
}
img.theclubpics {
margin-top: 20px;
}
div.vertical-container {
height: 570px;
position: relative;
}
div.vertical-text-para {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
}
form.formpadding {
padding-top: 20px;
}
.formmaxwidth input {
max-width: 400px;
display: inline-block;
}
textarea.form-control {
height: auto;
color: #000;
display: inline-block;
max-width: 400px;
border-color: #eee;
border-radius: 0px;
padding-top: 15px;
padding-left: 20px;
padding-bottom: 15px;
}
.form-control:focus {
border-color: #7DC42E;
box-shadow: none;
}
ul.navtheclub li {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 18px;
display: inline-block;
padding-right: 40px;
padding-top: 40px;
}
.breadcrumb .active {
color: #000000;
}
.textcenter {
text-align: center;
}
.signoff p {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
}
.caption p {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 13px;
font-weight: 400;
color: #999;
}
ol.breadcrumb {
background-color: #ffffff;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 13px;
padding-left: 0px;
}
h1 {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 50px;
}
h2 {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 32px;
padding-top: 20px;
}
body {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
padding-top: 70px;
color: #000;
}
p {
font-family: 'Geomanist-Regular', helvetica, sans-serif;
font-size: 18px;
line-height: 28px;
}
.smalltext {
font-size: 11px;
}
a.link {
color: #CBCBCB;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
transition: color 0.5s;
border-bottom: 2px solid;
border-color: transparent;
transition: border-bottom 0.5s;
}
a.link:hover {
color: #7ED321;
text-decoration: none;
border-color: #7ed321;
}
button.enterDetails {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 16px;
border-radius: 0px;
background-color: #7ED321;
vertical-align: middle;
border: 0px;
min-width: 190px;
height: 48px;
transition: background-color 0.5s;
}
button.enterDetails:hover {
background-color: #7DC42E;
}
button.enterDetails:focus {
outline: 0;
}
button.enterDetails img {
padding-left: 3px;
transform: translate(0px, 0);
transition: all 0.5s;
}
button.enterDetails:hover img {
transform: translate(10px, 0);
}
.form-group input {
font-family: 'Geomanist-Regular', helvetica, sans-serif;
border: 1px solid #eee;
color: #000;
height: 48px;
padding: 0 20px;
min-width: 240px;
border-radius: 0px;
}
textarea {
font-family: 'Geomanist-Regular', helvetica, sans-serif;
border: 1px solid #eee;
color: #000;
height: 48px;
padding: 0 20px;
min-width: 240px;
border-radius: 0px;
}
input.form-control:focus {
border-color: #7DC42E;
box-shadow: none;
}
input#formGroupExampleInput {
padding-bottom: 48px;
}
.btn-secondary {
padding-left: 10px;
}
.btn-secondary img {
padding-left: 5px;
cursor: pointer;
transform: translate(0px, 0);
transition: all 0.5s;
}
.btn-secondary:hover img {
transform: translate(10px, 0);
}
.btn-secondary a {
color: #000000;
border-bottom: none;
font-size: 16px;
transition: color 0.5s;
text-decoration: none;
}
.btn-secondary a:hover {
color: #7DC42E;
}
.success {
padding-top: 60px;
padding-bottom: 60px;
}
.successcollab {
padding-top: 60px;
padding-bottom: 60px;
}
.left-image {
min-height: 570px;
background-image: url('../images/nextmatch_image.jpg');
background-repeat: no-repeat;
padding-bottom: 40px;
}
.right-image {
min-height: 570px;
background-image: url('../images/theplayers_image.jpg');
background-repeat: no-repeat;
margin-bottom: 40px;
}
#homepage-title {
color: #ffffff;
}
p.shaded {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 400px;
padding-right: 40px;
}
p#second-para {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 450px;
padding-right: 40px;
}
h2#white-text {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 410px;
padding-right: 40px;
}
.vertical-text-main.white {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -25%);
color: #ffffff;
text-align: center;
bottom: -350px;
}
.vertical-text-para h2 {
margin-top: 0px;
}
a.homepage-top-link-white {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 500px;
padding-right: 40px;
}
a.homepage-top-link {
color: #ffffff;
}
.white-margin {
margin-left: 0px;
}
#formGroupExampleInput {
min-height: 100px;
}
#footer {
background-color: #000000;
color: #ffffff;
font-family: 'Geomanist-Regular', helvetica, sans-serif;
margin: 0px;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
#footer p {
font-size: 13px;
}
.dividers {
padding-top: 10px;
}
#footer img {
padding-right: 15px;
padding-left: 15px;
color: #ffffff;
opacity: 1;
transition: opacity 0.5s;
}
#footer img:hover {
opacity: 0.5;
}
.right {
float: right;
}
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background-color: #000000;
color: #ffffff;
width: 360px;
height: 371px;
padding: 100px 20px 0px 20px;
text-align: center;
box-sizing: border-box;
}
#media (max-width: 1199px) {
.back {
display: block;
max-width: 100%;
height: 300px;
padding: 50px 20px 0px 20px;
box-sizing: border-box;
}
}
#media (max-width: 991px) {
#header li {
margin-left: 0px;
font-size: 18px;
}
.back {
display: block;
max-width: 100%;
height: 227px;
padding: 50px 20px 0px 20px;
box-sizing: border-box;
font-size: 18px;
}
.center {
top: 84%;
}
h3.centersmall {
position: absolute;
left: 0;
top: 69%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 16px;
transition: color 1s;
padding-top: -10px;
}
p.playerstats {
font-size: 16px;
line-height: 24px;
}
}
#media (max-width: 767px) {
.center {
top: 91%;
font-size: 24px;
}
h3.centersmall {
position: absolute;
left: 0;
top: 82%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 24px;
transition: color 1s;
padding-top: -10px;
}
.form-group input {
margin-bottom: 20px;
}
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
width: 100%;
margin-bottom: 30px;
}
.back {
transform: rotateY(180deg);
background-color: #000000;
color: #ffffff;
width: 737px;
height: 600px;
margin-bottom: 30px;
padding: 100px 40px 0px 40px;
text-align: center;
box-sizing: border-box;
}
p.playerstats {
font-size: 18px;
line-height: 32px;
padding-right: 40px;
padding-left: 40px;
}
}
#media (max-width: 400px) {
.left-image {
min-height: 570px;
background-image: url(../images/nextmatch_image.jpg);
background-repeat: no-repeat;
padding-bottom: 40px;
margin-right: 15px;
}
.right-image {
min-height: 570px;
background-image: url(../images/theplayers_image.jpg);
background-repeat: no-repeat;
margin-bottom: 40px;
margin-right: 15px;
margin-top: 40px;
}
.homepage-main {
min-height: 400px;
background-image: url(/images/mainimage.jpg);
background-repeat: no-repeat;
border-radius: 0px;
margin-bottom: 40px;
}
.form-club {
margin-bottom: 10px;
}
.form-group {
margin-bottom: 0px;
}
textarea.form-control {
margin-bottom: 10px;
}
button.enterDetails {
width: 100%;
}
.form-group input {
margin-bottom: 20px;
}
.flip-container {
perspective: 1000px;
margin-bottom: 100px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
transform: rotateY(0deg);
width: 370px;
height: 382px;
margin-bottom: 30px;
}
.back {
transform: rotateY(180deg);
background-color: #000000;
color: #ffffff;
width: 370px;
height: 382px;
margin-bottom: 30px;
padding: 100px 20px 0px 20px;
text-align: center;
box-sizing: border-box;
}
h3.centersmall {
position: absolute;
left: 0;
top: 83%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: color 1s;
padding-top: -10px;
}
.center {
top: 88%;
font-size: 18px;
}
img.playerpiclast {
margin-bottom: 400px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/images/favicon.png" sizes="16x16 32x32" type="image/png">
<title>The players</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/website-css.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/picklesfc.js"></script>
</head>
<body>
<header id="header">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/homepage/"><img src="/images/logo.svg" alt="Pickles FC logo">Pickles FC</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span>The Club</span></li>
<li class="selected"><span>The Players</span></li>
<li><span>The Shop</span></li>
<li><span>Collaborations</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="theplayers row">
<div class='container2 col-sm-8'>
<h3 class="center">Alex Stewart</h3>
<image src="/images/mainprofile_image.jpg" alt="mainprofile_image2.jpg" class="playerpics img-responsive">
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
</div>
<div class="row playpicpadding">
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
</div>
<div class="instagram">
<h2 class="text-center">#picklesmagazine</h2>
<script src="//apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-276db0d4-25a2-4a5e-8a72-30da22fe3732"></div>
</div>
</div>
</body>
<footer id="footer">
<p>© 2017 Pickles Magazine | Football, Design and Wit</p>
<img src="/images/facebook.svg" height="25">
<img src="/images/twitter.svg" height="25">
<img src="/images/instagram.svg" height="25">
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

Develop Reference

JavaScript is the programming language of the Web.

How do I fix unwanted side scrollbar? [duplicate] - javascript

The scroll bars are called overflow, you can play around with it, even disable it directly. X and Y overflow for the x and y axis respectively. Have a look at this link fam, there may also be some other useful things for you there. .someDiv{ overflow-x: hidden; overflow-y: hidden; }

Related

How to solve this problem with responsive - blank space on right side?

div size after an eventlistener

Creating a "tuck in" effect for nav bar items

"Contact Me" Button won't get smaller when page is resized

HTML content layering on top of each other

Categories

Resources