I am trying to apply some styling rule to three #id selectors in a media query however it does not seem to be working. However if I do the same outside the query, it is working fine (but unfortunately I just need that rule for that particular screen size. What i am trying to achieve is to adjust the margins of the div according to the image size when the screen size is below 767px (there is a gap on left and right side).
Thank you!
body {
background-color: #fffffe;
}
.container{
margin: 0;
}
/** HEADER **/
#header-nav{
background-color: #5d46ea;
height: 78px;
border: 0;
}
#logo-img { /** Logo **/
background: url(../images/imgonline-com-ua-resize-wU3umxGfKn8Y0H6h.jpg) no-repeat;
width: 150px;
height: 62px;
margin-left: 20px;
margin-right: 20px;
}
.navbar-brand h1 { /** Blog Name **/
color: #fd9200;
font-family: 'oxygen', sans-serif;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
}
#nav-list a {
color: #fd9200;
font-weight: bold;
background: #5d46ea;
}
#nav-list a:hover{
background: #684fff;
}
.custom-toggler.navbar-toggler {
border: 1px solid rgb(253, 146, 0);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 146, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/** HOME PAGE **/
.container {
margin-top: 10px;
}
.jumbotron {
background-color: #ffffff;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
padding: 0;
margin: 0;
}
.row {
margin-top: 15px;
}
#main-tile, #dessert-tile, #smoothie-tile {
height: 250px;
width: 100%;
margin-bottom: 15px;
position: relative;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
overflow: hidden;
}
#main-tile:hover, #dessert-tile:hover, #smoothie-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#main-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#dessert-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#smoothie-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#main-tile span, #dessert-tile span, #smoothie-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.2em;
text-transform: uppercase;
background-color: #6a6a6a;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */
/*************** MEDIA QUERIES ***************/
/** LARGE DEVICE **/
#media (min-width:1200px) {
.jumbotron {
background: url(https://via.placeholder.com/1200X675) no-repeat;
height: 675px;
}
}
/** MEDIUM DEVICE **/
#media (min-width:992px) and (max-width: 1199px) {
.jumbotron {
background: url(https://via.placeholder.com/992x558) no-repeat;
height: 558px;
}
}
/** SMALL DEVICE **/
#media (min-width: 768px) and (max-width: 991px) {
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
}
/** EXTRA SMALL DEVICES **/
#media (min-width:767px) and (max-width: 576px){
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
#main-tile, #dessert-tile, #smoothie-tile{
width: 360px;
margin: 0 auto 15px;
}
}
/** SUPER EXTRA SMALL DEVICES **/
#media (max-width: 479px) {
#main-tile, #dessert-tile, #smoothie-tile {
width: 280px;
margin: 0 auto 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-witdth, initial-scale=1">
<title>Food Blog</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- HEADER -->
<header>
<nav id="header-nav" class="navbar navbar-light navbar-expand-lg">
<div class="navbar-header">
<a href="index.html" class="float-left d-none d-md-block">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<h1>Brand Name</h1>
</div>
</div>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="nav-list" class="navbar-nav ml-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dessert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Smoothie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<div id="main-content" class="container mx-auto">
<!-- JUMBOTRON -->
<div class="jumbotron text-center"> <!-- FEATURED RECIPE -->
<img src="https://via.placeholder.com/768X432" alt="New Recipe Image" class="img-fluid d-block d-md-none">
</div>
<!-- TILES BELOW THE JUMBOTRON -->
<div id="home-tiles" class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<div id="main-tile"><span>Mains</span></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div id="dessert-tile"><span>Deserts</span></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div id="smoothie-tile"><span>Smoothies</span></div>
</div>
</div>
</div>
<!-- END OF MAIN CONTENT -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
This line in your code is the problem:
#media (min-width:767px) and (max-width: 576px){ ...
In your code this applies to all widths wider than 767 and all widths smaller than 576px. I suppose it should be like this instead:
#media (max-width:767px) and (min-width: 576px){ ...
...to cover widths between 576 and 767px
ADDITION after comments:
I added this (general) rule:
.jumbotron img {
max-width: 100%;
}
Otherwise the image inside the jumbotron would appear at its original size an overflow the jumbotron at smaller screen sizes, therefore also making the whole page wider / forcing a scrollbar.
body {
background-color: #fffffe;
}
.container {
margin: 0;
}
/** HEADER **/
#header-nav {
background-color: #5d46ea;
height: 78px;
border: 0;
}
#logo-img {
/** Logo **/
background: url(../images/imgonline-com-ua-resize-wU3umxGfKn8Y0H6h.jpg) no-repeat;
width: 150px;
height: 62px;
margin-left: 20px;
margin-right: 20px;
}
.navbar-brand h1 {
/** Blog Name **/
color: #fd9200;
font-family: 'oxygen', sans-serif;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
}
#nav-list a {
color: #fd9200;
font-weight: bold;
background: #5d46ea;
}
#nav-list a:hover {
background: #684fff;
}
.custom-toggler.navbar-toggler {
border: 1px solid rgb(253, 146, 0);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 146, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/** HOME PAGE **/
.container {
margin-top: 10px;
}
.jumbotron {
background-color: #ffffff;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
padding: 0;
margin: 0;
}
.jumbotron img {
max-width: 100%;
}
.row {
margin-top: 15px;
}
#main-tile,
#dessert-tile,
#smoothie-tile {
height: 250px;
width: 100%;
margin-bottom: 15px;
position: relative;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
overflow: hidden;
}
#main-tile:hover,
#dessert-tile:hover,
#smoothie-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#main-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#dessert-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#smoothie-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#main-tile span,
#dessert-tile span,
#smoothie-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.2em;
text-transform: uppercase;
background-color: #6a6a6a;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */
/*************** MEDIA QUERIES ***************/
/** LARGE DEVICE **/
#media (min-width:1200px) {
.jumbotron {
background: url(https://via.placeholder.com/1200X675) no-repeat;
height: 675px;
}
}
/** MEDIUM DEVICE **/
#media (min-width:992px) and (max-width: 1199px) {
.jumbotron {
background: url(https://via.placeholder.com/992x558) no-repeat;
height: 558px;
}
}
/** SMALL DEVICE **/
#media (min-width: 768px) and (max-width: 991px) {
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
}
/** EXTRA SMALL DEVICES **/
#media (max-width:767px) and (min-width: 576px) {
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
#main-tile,
#dessert-tile,
#smoothie-tile {
width: 360px;
margin: 0 auto 15px;
}
}
/** SUPER EXTRA SMALL DEVICES **/
#media (max-width: 479px) {
#main-tile,
#dessert-tile,
#smoothie-tile {
width: 280px;
margin: 0 auto 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-witdth, initial-scale=1">
<title>Food Blog</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- HEADER -->
<header>
<nav id="header-nav" class="navbar navbar-light navbar-expand-lg">
<div class="navbar-header">
<a href="index.html" class="float-left d-none d-md-block">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>Brand Name</h1>
</a>
</div>
</div>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="nav-list" class="navbar-nav ml-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dessert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Smoothie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<div id="main-content" class="container mx-auto">
<!-- JUMBOTRON -->
<div class="jumbotron text-center">
<!-- FEATURED RECIPE -->
<img src="https://via.placeholder.com/768X432" alt="New Recipe Image" class="img-fluid d-block d-md-none">
</div>
<!-- TILES BELOW THE JUMBOTRON -->
<div id="home-tiles" class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu-categories.html">
<div id="main-tile"><span>Mains</span></div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu-categories.html">
<div id="dessert-tile"><span>Deserts</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="menu-categories.html">
<div id="smoothie-tile"><span>Smoothies</span></div>
</a>
</div>
</div>
</div>
<!-- END OF MAIN CONTENT -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Related
body{
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
}
#header-nav{
background-color: white;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logotild1.png') no-repeat;
width: 170px;
height: 100px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
margin-top: 25px;
}
.navbar-image, .navbar-brand{
float: left;
}
.navbar-brand h1 { /* Restaurant name */
font-family: 'Nunito', sans-serif;
color: lightskyblue;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
}
#nav-list a {
color: black;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
}
#nav-list a span {
font-size: 1.8em;
}
#navBarlist{
font-size: 1.2em;
}
#smallpic{
margin-top: 30px;
}
.navbar-header button.navbar-toggler, .navbar-header .navbar-toggler-icon {
border: 1px solid lightgrey;
}
.navbar-header button.navbar-toggler{
clear: both;
}
.panel-footer{
position: absolute;
margin-top: 30px;
padding-top: 35px;
padding-bottom: 30px;
background-color: #222;
border-top: 0;
width: 100%;
}
.panel-footer div.row{
margin-bottom: 35px;
}
#om{
line-height: 2;
}
/* HOME PAGE */
.container .jumbotron {
box-shadow: 0 0 50px white;
border: 2px solid white;
}
#tøj-tile, #face-tile, #andet-tile{
height: 250px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
border: 2px solid whitesmoke;
overflow: hidden;
}
#tøj-tile:hover, #andet-tile:hover, #face-tile:hover{
box-shadow: 0 1px 5px 1px black;
}
#tøj-tile{
background: url('../images/tøjtile.png') no-repeat;
background-position: center;
}
#andet-tile{
background: url('../images/andettile.png') no-repeat;
background-position: center;
}
#face-tile{
background: url('../images/facetile.png') no-repeat;
background-position: center;
}
#tøj-tile span, #andet-tile span, #face-tile span{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
/********** Large devices only **********/
#media (min-width: 1200px) {
.container .jumbotron {
background: url('../images/storbilledweb.jpg') no-repeat;
height: 675px;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
/* End Header */
.container .jumbotron {
background: url('../images/mediumbillede.jpg') no-repeat;
height: 558px;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
.container .jumbotron {
background: url('../images/lillebillede.jpg') no-repeat;
height: 432px;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
.navbar-brand{
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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">
<title>Tilde & brdr</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<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=Nunito:wght#300&display=swap" rel="stylesheet">
<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=Nunito:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-lg navbar-light-bg-light">
<div class="container">
<div class="navbar-header">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navBarlist"
aria-controls="navBarlist"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<a
href="index.html"
class ="navbar-image float-left d-none d-sm-block"
>
<div
id = "logo-img"
alt="Logo image"
>
</div>
</a>
<div
class="navbar-brand">
<a
href="index.html">
<h1>Tilde & Brdr.</h1>
</a>
</div>
</div>
</div>
<div
class="collapse navbar-collapse"
id="navBarlist"
>
<ul
id = "nav-list"
class="navbar-nav ml-auto">
<li
class="nav-item">
<a
class="nav-link"
href="#">
Home
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Tøj
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Udsalg
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Kontakt
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Facebook
</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="main-content" class="container">
<div class="jumbotron" id="smallpic">
<img src="images/lillebillede.jpg" alt="Picture of clothing"
class="img-fluid d-block d-sm-none">
</div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="tøj-categories.html">
<div id="tøj-tile">
<span>tøj</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="andet-category.html">
<div id="andet-tile">
<span>andet</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="face-category.html">
<div id="face-tile">
<span>facebook</span>
</div>
</a>
</div>
</div><!-- End of #home-tiles -->
<footer class="panel-footer">
<div id="footi"class="container">
<div class="row">
<section id="kontakt" class="col-sm-4">
<span>Kontakt:</span><br>
Email: blablabla#bla.dk<br>
Facebook<br>
Tlf: 09010222<br>
</section>
<section id="om" class="col-sm-4">
Alt er hjemmesyet/hjemmelavet af mig.<br>
Dette er min hobby, derfor kan der være længere leveringstid på nogen ordre, men kontakt mig, så vi kan finde ud af noget nærmere. Jeg håber I synes noget af det jeg laver vækker en interesse.
</section>
<section id="bla" class="col-sm-4">
blablabla blablabla ballbsldablal alablslbalslbalslasal alablsblasalalsa
</section>
</footer>
</div>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I've encountered a problem where I get some space between the browser-edge and the footer. I can tell that the size of the footer isnt big enough. The width I've set to 100% but obviously that isn't the problem. Can any1 explain to me what I'm missing?
It started out by having the same space on both left and right, but putting position:absolute somehow solved the right side. No idea what to do with the left side.
You need to override default body margin and set it to 0
body {
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
margin: 0;
}
This is my A Tag highlighted through tabbing
Question:
why is there a weird space on the right side?
How can i fix it but the layout stays the same?
Code:
#servers img {
border-radius: 50%;
}
#servers a {
margin: 10px;
color: transparent;
padding: 0;
}
.row {
display: block;
}
<div id="servers" class="row">
<a href="/servers/censored">
<img class="server-censored" width="60" height="60" src="https://cdn.discordapp.com/icons/322699372443729931/302e4cc925c9f18d6f3e36a8499e1c1d.png" alt="censored">
</a>
<a href="/servers/censored">
<img class="server-censored" width="60" height="60" src="https://i.imgur.com/fFReq20.png" alt="censored">
</a>
</div>
Context:
I set the row display to block because Edge otherwise sets it to flex and then all the links are not side by side but beneath each other
with display: block
without display: block even with flex-direction: row
i set the a color to transparent because otherwise there is a blue line left to the image (visited link i think)
Github: HTML
CSS
Is this what you're looking for?
I'd display: flex on the row and then display: block on the anchors.
Also, outline: 0 should get rid of the blue outline.
[EDIT]
I used your HTML and CSS and found `.row>* { width: 100% } to be the culprit.
Adding the following solves your issue, I believe:
#servers a {
width: auto;
}
:root {
--scrollbar-color: #909090;
--scrollbar-hover: #606060;
--background: var(--bs-gray-dark);
--text: #fff;
--list-item: var(--bs-gray);
--text-secondary: #6c757d !important;
}
#media (prefers-color-scheme: light) {
:root {
--background: var(--bs-white);
--text: #000;
--list-item: var(--bs-light);
}
}
body {
background: var(--background);
color: var(--text);
overflow-x: hidden;
}
var {
color: var(--text);
}
.column {
float: left;
padding-left: 5px;
}
#usermenu::after {
content: "";
clear: both;
display: table;
}
.dropdown-item,
.dropdown-menu {
background-color: var(--text-secondary);
color: var(--text);
}
#media (min-width: 991.98px) {
main {
padding-left: 240px;
}
}
.list-group-item {
background-color: var(--list-item);
}
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding: 58px 0 0;
/* Height of navbar */
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
width: 240px;
z-index: 600;
}
#media (max-width: 991.98px) {
.sidebar {
width: 100%;
}
}
.sidebar .active {
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: 0.5rem;
overflow-x: hidden;
overflow-y: auto;
}
#servers img {
border-radius: 50%;
}
#servers a {
margin: 10px;
color: transparent;
/* display: block; */
padding: 0;
}
.row {
display: block;
}
.grayscale {
filter: grayscale(100%) blur(0.5px) opacity(50%);
}
#media only screen and (min-width: 600px) {
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border-width: 4px;
border-color: transparent;
border-style: solid;
background-clip: content-box;
background-color: var(--scrollbar-color);
}
::-webkit-scrollbar-thumb:hover {
border-radius: 8px;
border-width: 4px;
border-color: transparent;
border-style: solid;
background-clip: content-box;
background-color: var(--scrollbar-hover);
}
}
#servers a {
width: auto;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Servers | Discord Music Bot</title>
<link rel="shortcut icon" type="image/gif" href="/Music.gif">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css" />
</head>
<body>
<section class="main">
<header>
<!-- Navbar -->
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
onclick="function re(){ let r = $('#sidebarMenu'); if(r.hasClass('collapse'))r.removeClass('collapse');else r.addClass('collapse')}re()">
<i class="fas fa-bars"></i>
</button>
<!-- Brand -->
<a class="navbar-brand" href="/">
<img src="/Music.gif" height="40" alt="" loading="lazy" />
<var>WEB.SERVERS.SERVERS</var>
</a>
<div>
<h1 class="server-name"></h1>
</div>
<div id="usermenu" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<div class="column">
<img id="usericon" src="" width="25"></img>
</div>
<div class="column">
<h4 id="username"></h4>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="/logout"><var>WEB.SIDE.LOGOUT</var></a></li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Sidebar -->
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse">
<div class="position-sticky">
<div class="list-group list-group-flush mx-3 mt-4">
<a href="/dashboard" class="list-group-item list-group-item-action py-2 ripple" aria-current="true">
<i class="fas fa-tachometer-alt fa-fw me-3"></i><span><var>WEB.SIDE.DASHBOARD</var></span>
</a>
<a href="/servers" class="list-group-item list-group-item-action py-2 ripple active">
<i class="fas fa-server fa-fw me-3"></i><span><var>WEB.SIDE.SERVERS</var></span>
</a>
</div>
</div>
</nav>
<!-- Sidebar -->
</header>
<main style="margin-top: 58px;">
<div class="container pt-4">
<section>
<h1><var>WEB.SERVERS.SELECT</var></h1>
<div id="servers" class="row">
<a href="#">
<img class="server-censored" width="60" height="60" src="https://cdn.discordapp.com/icons/322699372443729931/302e4cc925c9f18d6f3e36a8499e1c1d.png" alt="censored">
</a>
<a href="#">
<img class="server-censored" width="60" height="60" src="https://i.imgur.com/fFReq20.png" alt="censored">
</a>
</div>
</section>
</div>
</main>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
I have a website template I am building, and for the first time wanted to try out some cool section dividers. I am using ShapeDivider App, and its working great until I go into a specific width or resolution in the Chrome developer tools since I am trying to make it all mobile friendly. In the iPad size section, I am getting a weird tiny space below the svg, and I have no clue how to fix, and I been browsing around with 0 help on the matter. The display is set as block, which is about the only advice I been reading around.
Here is my code:
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
font-family: 'Poppins', sans-serif;
margin: 0;
}
/* NAVIGATION */
#octo-logo {
width: 190px;
}
.nav-item {
font-family: 'Poppins', sans-serif;
margin-right: 30px;
font-size: 18px;
}
/* END NAVIGATION */
/* HERO */
.hero {
background-image: url("img/background.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 800px;
position: relative;
background-position: 50% 30%;
}
.hero-message {
padding-top: 160px;
}
.hero-message h1 {
color: #194859;
font-weight: 700;
font-size: 60px;
padding-bottom: 20px;
}
.hero-message p {
font-size: 20px;
margin-top: 20px;
}
.hero-message span {
color: rgb(49, 110, 106);
}
.hero button {
padding: 10px 20px;
background-color: #FFAD5C;
color: white;
font-weight: 700;
margin-top: 20px;
font-size: 16px;
margin-bottom: 20px;
font-family: 'Poppins', sans-serif;
}
#coral2 {
width: 100px;
position: absolute;
right: 0;
}
#coral1 {
width: 130px;
position: absolute;
bottom: 60px;
}
.custom-shape-divider-bottom-1600301955 {
position: absolute;
display: block;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1600301955 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1600301955 .shape-fill {
fill: #FFFFFF;
}
/* END HERO */
/* MEDIA QUERIES */
/* Extra large devices (large desktops, 1200px and up) */
#media (max-width: 1200px) {
.hero-message h1 {
font-size: 45px;
}
#coral1, #coral2 {
display: none;
}
.hero-message p {
font-size: 18px;
margin-top: 10px;
}
}
/* Large devices (desktops, 992px and up) */
#media (max-width: 992px) {}
/* Medium devices (tablets, 768px and up) */
#media (max-width: 768px) {
.hero {
background-image: url("img/phonebg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 60% 80%;
}
.hero-message {
text-align: center;
padding-top: 60px;
}
.hero-message p {
display: none;
}
.custom-shape-divider-bottom-1600301955 svg {
display: none;
}
}
/* Small devices (landscape phones, 576px and up) */
#media (max-width: 576px) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>OctoDent</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- Font-awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #3E96B1;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<!-- NAV CONTENT -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<img id="octo-logo" src="img/logo.png" alt="">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us<span class="sr-only">(current)</span></a>
</li>
</div>
</li>
</ul>
<!-- END NAV CONTENT -->
</div>
</nav>
<!-- END NAVIGATION -->
<!-- HERO -->
<section class="hero">
<img id="coral1" src="img/coral1.png" alt="">
<img id="coral2" src="img/coral2.png" alt="">
<div class="container">
<div class="hero-message">
<h1>A Brighter, Better <br>Dental Experience.</h1>
<p>
<span>Whether you need routine dentistry, would like to have <br>cosmetic work completed or require restoriation, we offer a <br> variety of services to suit your needs.</span>
</p>
<button class="btn" data-toggle="modal" data-target="#appointment-modal">BOOK AN APPOINTMENT</button>
</div>
</div>
<div class="custom-shape-divider-bottom-1600301955">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</section>
<!-- END HERO -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I have spent many hours trying to fix this problem but with no luck.
When I decrease the resolution a horizontal scrollbar appears and I can't find which element is out of the box causing this issue.
I'm using a bootstrap theme and I have inserted some CSS code inside this bootstrap theme, I have also replaced some sections with my own.
When I delete all nodes except from the footer I don't have the horizontal scroll bar issue so I believe I have done more than 1 mistakes. I also tried to have 1 section at the time and still the issue persists. Right now I'm out of options really need help to fix that issue that holds me back.
You can check it here https://jsfiddle.net/28rxv53a/
The images will not work cause I'm using Jekyll and they point to my GH-PAGE.
overflow-x:hidden isn't a solution for my problem.
EDITED
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="/LazPap/assets/css/custom.css">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>LazPap - Portfolio</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<!-- Font Awesome Icons -->
<link href="https://blackrockdigital.github.io/startbootstrap-creative/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Secular+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600&display=swap" rel="stylesheet">
<!-- Plugin CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS - Includes Bootstrap -->
<link href="https://blackrockdigital.github.io/startbootstrap-creative/css/creative.min.css" rel="stylesheet">
<!-- Fade-in and Fade-out Plugin -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<!-- Modaal Plugin for contact link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css"/>
</head>
<body id="page-top">
<header class="masthead-background">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-12">
<div class="parallax-window"><h1 class="background-text" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">LazPap</h1></div>
<div id="scene">
<div class="layer parallax-window" data-depth="0.5" data-parallax="scroll" data-image-src="HTML_5.png">
<img src="/LazPap/images/HTML_5.png" class="background-image-left" />
</div>
<div class="layer" data-depth="-0.5">
<img src="/LazPap/images/CSS_3.png" class="background-image-right" />
</div>
<div class="layer" data-depth="0.5">
<img src="/LazPap/images/Javascript.png" class="background-image-under" />
</div>
</div>
</div>
</div>
</div>
</header>
<section class="page-section masthead-under-background">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center mx-auto">
<h2 class="text-white mt-0 line-height text-heading" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">This project designed with Ruby on Rails</h2>
<hr class="divider light my-4" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="650" />
<p class="text-white mb-5 text-sub" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">For this Rails app project have used a variety of Rails Gems and Javascript - jQuery Libraries and differnt CSS animations.</p>
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000">
<img src="/LazPap/images/Ruby_On_Rails.png" class="icon-ruby" />
</div>
</div>
</div>
</div>
</section>
<p><!-- About Section --></p>
<section class="page-section" id="work">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h1 class="work-text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">My Wordpress Work</h1>
</div>
<div class="col-lg-10 text-center container-grid">
<div data-aos="fade-right" data-aos-duration="1000" data-aos-delay="800">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>Bazagiazi</h3>
Visit
</div>
</div>
</div>
<div data-aos="fade-down" data-aos-duration="1000" data-aos-delay="1200">
<div class="box">
<div class="content">
<h2>02</h2>
<h3>Empty</h3>
Stay Here
</div>
</div>
</div>
<div data-aos="fade-left" data-aos-duration="1000" data-aos-delay="1000">
<div class="box">
<div class="content">
<h2>03</h2>
<h3>Empty</h3>
Stay Here
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<p><!-- Contact Section --></p>
<section class="page-section" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h1 class="mt-0 text-heading purple-text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">Let's Get In Touch!</h1>
<hr class="divider my-4" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600" />
<p class="text-muted mb-5 text-sub" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-delay="800">Feel free to contact me for any questions I'll glad to answer you as soon as i can!</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 ml-auto text-center mb-5 mb-lg-0">
<i class="fas fa-envelope fa-3x mb-3 text-muted" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000"></i>
<a class="d-block text-sub" href="mailto:lazospap3#gmail.com" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="1200">lazospap3#gmail.com</a>
</div>
</div>
</div>
<button id="btnScrollToTop" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
<i class="material-icons">arrow_upward</i>
</button>
</section>
<script type="text/javascript">
const btnScrollToTop = document.getElementById("btnScrollToTop");
btnScrollToTop.addEventListener("click", function() {
$("html, body").animate({scrollTop: 0}, "slow");
});
</script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<p><!--Heading Text translateY movement-->
<script type="text/javascript" defer="">
$(window).scroll(function() {
var scrollval = $(this).scrollTop();
$(".background-text").css("transform",'translateY('+-scrollval/1.5+'%)');
});
</script></p>
<script defer="">
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
<script defer="">
AOS.init();
</script>
<!--Modaal script -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top"> <img src="/LazPap/images/Logo.png " class="logo-image"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger modaal" data-modaal-type="inline" data-modaal-animation="fade" href="#inline" data-modaal-height="500">Contact</a>
<div id="inline" style="display:none;">
<h2 class="modaal-heading">Contact Me</h2>
<h1 class="modaal-heading"><a class="d-block" href="mailto:lazospap3#gmail.com">lazospap3#gmail.com</a></h1>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/modaal#0.4.4/dist/js/modaal.min.js"></script>
<script type="text/javascript">
$(".inline").modaal();
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<script>
$("body").niceScroll({
cursorcolor:"#fb6542",
cursorwidth:"12",
cursorborder: "none",
cursorborderradius: 4,
scrollspeed: 10,
});
</script>
<footer class="bg-light py-5">
<div class="container">
<div class="small text-center text-muted text-sub">Copyright © 2019 - LazPap</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
<!--CDN for Scroll opacity -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" defer>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 150) {
$(".background-image-left").css({"opacity" : "0"})
$(".background-image-right").css({"opacity" : "0"})
$(".background-image-under").css({"opacity" : "0"})
$(".background-text").css({"opacity" : "0"})
$("#btnScrollToTop").css({"opacity" : "1"})
}
else {
$(".background-image-left").css({"opacity" : "1"})
$(".background-image-right").css({"opacity" : "1"})
$(".background-image-under").css({"opacity" : "1"})
$(".background-text").css({"opacity" : "1"})
$("#btnScrollToTop").css({"opacity" : "0"})
}
})
})
</script>
<!--Heading Text translateY movement-->
<script type="text/javascript" defer>
$(window).scroll(function() {
var scrollval = $(this).scrollTop();
$(".background-text").css("transform",'translateY('+-scrollval/1.5+'%)');
});
</script>
<script defer>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
<script defer>
AOS.init();
</script>
</body>
</html>
CSS
#btnScrollToTop{
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #e62739;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
color: #ffffff;
outline: none;
cursor: pointer;
border: none;
}
#btnScrollToTop:active{
background: #cc2333;
}
.purple-text {
color: #5a19b5;
}
.container-grid {
display: grid;
grid-template-columns: 1;
position: relative;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 0 40px;
grid-template-rows: auto;
}
.container-grid .box {
display: flex;
height: 400px;
background: #060c21;
position: relative;
justify-content: center;
align-items: center;
border: 1px solid #000;
}
.container-grid .box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
transform: skew(2deg,2deg);
z-index: -1;
}
.container-grid .box:nth-child(1):before {
background: linear-gradient(315deg, #ff0057, #e64a19);
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
}
.container-grid .box:nth-child(2):before {
background: linear-gradient(315deg, #89ff00, #00bcd4);
}
.container-grid .box:nth-child(3):before {
background: linear-gradient(315deg, #e91e63, #5d02ff);
}
.container-grid .box::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.content {
position: relative;
padding: 20px;
transform: translateY(40px);
}
.box .content h2 {
position: absolute;
top: -140px;
margin: 0;
padding: 0;
font-size: 10em;
color: rgba(255,255,255,.05);
transition: 0.5s;
}
.box:hover .content h2 {
top: -210px;
}
.box .content h3 {
margin: 0 0 10px;
padding: 0;
font-size: 34px;
font-weight: 500;
color: #fff;
font-family: "Montserrat", sans-serif;
}
.box .content a {
position: relative;
margin: 20px 0 0;
padding: 10px 20px;
border: 1px solid #fff;
display: inline-block;
color: #fff;
transition: 0.5s;
transform: translateY(-40px);
opacity: 0;
visibility: hidden;
text-decoration: none;
font-family: "Montserrat", sans-serif;
}
.box:hover .content a {
transform: translateY(0px);
opacity: 1;
visibility: visible;
}
.box .content a:hover {
color: #000;
background: #fff;
}
.work-text {
font-family: "Montserrat", sans-serif;
color: #5a19b5;
margin-bottom: 50px;
}
.bg-work {
background-color: #e7eeed;
}
.modaal-heading {
text-align: center;
font-family: "Montserrat", sans-serif;
margin-bottom: 115px;
}
.text-sub{
font-family: 'Montserrat', sans-serif;
}
.text-heading {
font-family: 'Montserrat', sans-serif;
font-size: 34px;
}
.background-text {
text-align: center;
left: 20%;
position: absolute;
font-family: 'Secular One', sans-serif;
color: #fff55a;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
font-size: 90px;
}
.logo-image {
top: 0px;
left: 0px;
}
.masthead-background {
height: 100vh;
min-height: 500px;
background-image: url("{{ '/images/Under_Background.png' | prepend: site.baseurl }}");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
}
.masthead-under-background {
height: 100vh;
min-height: 500px;
background-image: url("{{ '/images/Under_Background.png' | prepend: site.baseurl }}");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
}
.background-image-left {
position: relative;
top: 50%;
left: 10%;
transition: .8s;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
height: auto;
}
.background-image-right {
top: 50%;
left: 700px;
position: relative;
transition: .8s;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
height: auto;
}
.background-image-under {
position: relative;
top: 150px;
left: 450px;
transition: .8s;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
height: auto;
}
.icon-ruby {
position:relative;
transition: transform 1s;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
}
.icon-ruby:hover {
transform: scale(1.2);
}
.line-height {
line-height: 2;
}
#media (min-width: 320px) and (max-width: 480px) {
.icon-ruby{width: 60%;}
}
#media (min-width: 320px) and (max-width: 480px) {
.background-image-left{width: 30%;}
}
#media (min-width: 320px) and (max-width: 480px) {
.background-image-under {
width: 50%;
left: 100px;
top: 100px;
}
}
#media (min-width: 320px) and (max-width: 480px) {
.background-image-right {
width: 48%;
left: 250px;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.background-image-left {
width: 22%;
left: 10px;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.background-image-under {
width: 60%;
left: 250px;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.background-image-right {
width: 50%;
left: 400px;
}
}
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.background-image-left {
width: 20%;
}
}
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.background-image-under {
width: 70%;
}
}
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.background-image-right {
width: 70%;
left: 500px;
}
}
#media (min-width: 320px) and (max-width: 480px) {
.background-text {
left: 10px;
}
#media (min-width: 576px) {
.background-text {
font-size: 100px;
}
}
#media (min-width: 768px) {
.background-text {
font-size: 150px;
}
}
#media (min-width: 992px) {
.background-text {
font-size: 180px;
}
}
#media (min-width: 1200px) {
.background-text {
font-size: 220px;
}
}
#media (min-width: 320px) and (max-width: 480px) {
.modaal-heading{
font-size:7vw;
}
}
I am trying to make some text responsive. For some reason, media queries are not working and the font is pushed below the image, whereas it should be above.
Here is my code:
// Bootstrap callback test
if ($('#bootstrapCssTest').is(':visible') === true) {
$('<link href="/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css" />').appendTo('head');
}
// Make .navbarButtonDiv go to its child 'a' tag's href on click
$(".navbarButtonDiv").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
// Collapse navbar on nav link click
$(document).on('click', '.navbar-collapse.in', function(e) {
if ($(e.target).is('a')) {
$(this).collapse('hide');
}
});
// Collapse navbar on document click
$(document).on('click', function() {
$('.collapse').collapse('hide');
});
/* Font imports */
#import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);
#font-face {
font-family: "FuturaNewLight";
src: url("fonts/FuturaNewLight.otf")
}
/* Navbar padding */
body {
padding-top: 100px;
overflow-x: hidden !important;
}
/* Navbar */
.navbar {
font-family: "Bitter", serif;
}
.navbar.navbar-custom .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
top: 0;
display: block;
width: 100px;
text-align: center;
padding: 0;
}
.navbar.navbar-custom > .wrapper .navbar-brand.navbar-brand-centered {
margin-left: -55px;
margin-top: 10px;
}
.navbar .nav.navbar-nav {
font-size: 150%;
}
.navbar-logo {
height: 145%;
}
/* Media queries */
#media (min-width: 768px) {
.wrapper {
padding-right: 15px;
}
.navbar.navbar-custom .navbar-nav > li > a {
line-height: 60px;
transition: background 200ms linear;
}
.navbar.navbar-custom .navbar-nav > li > a:hover {
background: #96D5FF;
}
}
#media (max-width: 767px) {
.navbar.navbar-custom {
padding: 20px 0;
}
.navbar.navbar-custom .navbar-collapse {
margin: 20px 0 -20px;
border: none;
box-shadow: none;
height: 260px;
}
.navbar.navbar-custom .navbar-nav > li > a {
text-align: center;
}
.navbar-logo {
margin-left: 20px;
height: 110%;
}
.futuraNewLightHeader {
font-size: 20px;
}
}
/* Header styling */
#jumbotronHeader {
position: relative;
font-family: "Bitter", serif;
width: 100%;
bottom: 9px;
}
#homePageImage {
position: relative;
-webkit-filter: blur(5px);
filter: blur(5px);
bottom: 30px;
z-index: -1;
width: 70%;
}
/* Font styling */
.futuraNewLightHeader {
position: absolute;
top: 550px;
font-size: 150px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
.futuraNewLightSubHeader {
position: absolute;
top: 750px;
font-size: 60px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
#dynamicHeaderText {
color: #2099FF;
}
/* General styling */
.centerText {
text-align: center;
}
<!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">
<title>Education for Everyone</title>
<link rel="icon" type="image/png" href="images/edufeLogo.png">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
<div class="wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand navbar-brand-centered" href="#/">
<img class="navbar-logo" src="images/edufeLogo.png">
</a>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>About
</li>
<li>Learn
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Log In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</nav>
<!-- Jumbotron -->
<div class="jumbotron" id="jumbotronHeader">
<h1 class="display-3 centerText">Education for Everyone</h1>
<p class="lead centerText">Learn. Create. Share.</p>
<hr class="m-y-3">
</div>
<!-- Image header -->
<div class="imageHeader">
<span class="futuraNewLightHeader centerText"><span id="dynamicHeaderText">Learn</span> something new.</span>
<span class="futuraNewLightSubHeader centerText">From the internet to real life.</span>
</div>
<img src="images/homePageImage.png" id="homePageImage" class="center-block img-responsive">
</div>
<!-- Script tags -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Thanks! Any help is appreciated!
Move all text formatting options into the media queries and try then.
First you need set #media queries to #media screen and (max-width: ....).
Some cases browsers need screen parameter.
Second, you need change font size of elements when responsive. I suggest using em unit to make responsive.