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;
}
Related
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<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=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
My websites sidebar doesn't work on mobile. If you wanna see what i mean, go to Zinexium. I don't know what to do, im new to html. The code.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
:root {
--sidebar-width: 4.5em;
}
.sidebar {
background-color: #333;
position: fixed;
transition: width 0.2s ease;
}
.sidebar nav {
height: 100%;
}
.sidebar .sidebar__nav {
display: flex;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .sidebar__nav .sidebar__nav__link {
align-items: center;
color: #bbb;
display: flex;
padding-left: 20px;
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.sidebar .sidebar__nav .sidebar__nav__link:hover {
background-color: rgba(0, 0, 0, 0.15);
color: #80f;
}
.sidebar .sidebar__nav .sidebar__nav__text {
display: none;
margin-left: 10px;
margin-right: auto;
white-space: nowrap;
}
.sidebar .sidebar__nav i {
align-items: center;
display: flex;
justify-content: center;
}
#media (max-width: 572px) {
.sidebar {
bottom: 0;
width: 100%;
}
.sidebar .sidebar__nav {
justify-content: center;
}
.sidebar .sidebar__nav .sidebar__nav__link {
height: 100%;
padding: 0.75em;
}
.sidebar .sidebar__nav i {
font-size: 2rem;
}
}
#media (min-width: 572px) {
.sidebar {
height: 100vh;
left: 0;
width: var(--sidebar-width);
}
.sidebar:hover {
width: 14rem;
}
.sidebar .sidebar__nav {
flex-direction: column;
}
.sidebar .sidebar__nav .sidebar__nav__link {
padding: 1em;
}
.sidebar:hover .sidebar__nav .sidebar__nav__text {
display: inline;
}
.sidebar .sidebar__nav i {
font-size: 2.5rem;
}
}
#media (max-height: 434px) {
.sidebar {
overflow-y: scroll;
}
}
:root {
--sidebar-width: 4.5em;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto';
}
* {
outline: none;
box-sizing: border-box;
}
.main {
margin-left: auto;
margin-right: auto;
max-width: 992px;
padding: 2em 1.5em;
}
.main h2 {
font-size: 2em;
margin-top: 0px;
}
.main p {
color: #444;
font-size: 1.25em;
line-height: 2;
text-align: justify;
}
#media (min-width: 572px) {
.main {
margin-left: var(--sidebar-width);
}
}
#media (min-width: 992px) {
.main {
padding: 2.5em;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
p {
font-size: 34px;
}
.wrapper {
position: relative;
/* height: 200px; */
width: 80%;
margin: auto;
overflow: auto;
}
.main {
margin: auto;
}
.column {
float: left;
width: 33.3%;
margin: 4em;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
width: 400px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.card p {
font-size: 150%; /* changes font size inside of cards*/
}
.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}
.container {
padding: 0 16px;
}
.container::after,
.row::after {
content: '';
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.rainbow {
text-align: center;
text-decoration: underline;
font-size: 32px;
font-family: monospace;
letter-spacing: 5px;
}
.rainbow_text_animated {
background: linear-gradient(
to right,
#6666ff,
#0099ff,
#00ff00,
#ff3399,
#6666ff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow_animation 6s ease-in-out infinite;
background-size: 400% 100%;
}
#keyframes rainbow_animation {
0%,
100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
#rcorners1 {
border-radius: 25px;
background: #d3d3d3;
padding: 20px;
width: 300px;
height: 345px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
The snippet isn't the exact website, only the developers page. If you wanna see the actual page, go to "The code" i linked.
Thanks.
P.S. The snippet is missing some things, so go to the actual developers page if you wanna see it ig.
If by "doesn't work" you meant "is hiding under the content" ...the solution is to give it the z-index: 1 in your CSS:
.sidebar {
z-index: 1;
}
it will do the job.
This is the HTML part
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="top-bar">
<div class="container">
<div class="row">
<div class="top-bar-section">
<p class="top-bar-question">Do you have any questions? Call Us 0774747790 </p>
</div>
<div class="row">
<div class="top-nav-bar">
<img class="logo" src="assets/images/logo.png" alt="">
<ul class="top-nav-options">
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Home</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Appointment</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Treatment</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Facility</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Gallery</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">About Us</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Contact Us</li></a>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="background-image-block">
<img class="background-img1" src="assets/images/background.jpg" alt="">
</div>
</div>
<div class="row">
<div class="box-left">
</div>
<div class="box-mid">
</div>
<div class="box-right">
</div>
</div>
</body>
</html>
This is the CSS
#media only screen and (min-width: 200px) and (max-width: 275px)
{
body
{
background-color: #FFFFFF;
}
.top-bar
{
background-color: #3FA4F6;
width: 500px;
height: 40px;
}
.top-bar-section
{
margin-top: 10px;
width: 375px;
}
.top-bar-question
{
color: white;
font-size: 12px;
padding-left: 12px;
}
.top-nav-bar
{
width: 375px;
height: 100px;
}
.top-nav-bar
{
margin-top: 20px;
}
.logo
{
width: 141px;
margin-bottom: 8px;
padding-left: 15px;
}
.top-nav-option
{
font-size: 17px;
padding: 4px;
font-size: 15px;
list-style: none;
color: black;
}
.background-img1
{
width: 272px;
margin-top: 176px;
height: 180px;
margin-left: 13px;
}
.top-nav-option-link
{
text-decoration: none;
color: black;
}
.top-nav-option-link:hover
{
text-decoration: none;
color: #3FA4F6;
}
.box-left
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
.box-mid
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
.box-right
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
}
The problem is the links are working upto Apartment option. I have figured out problem is with the bootstrap css I'm using.When I remove the bootstrap cdn it works fine but when I put it back It won't work.I need Bootstrap container and row classes cause I have ordered them according to those divs
Remove the margin-top from the class .background-img1 and add margin-top: 176px; to .background-image-block class;
The Links are not working because the div with class .background-image-block was on its top.
I'm building a dupe of the Twitter profile page but I noticed that every time I resize my browser all the text and images get jumbled together which makes the page look really messy. How do I get all the text and image to stay in the same place, relative to each other, and shrink proportionally when I resize my browser. I tried using percentages for widths and heights of divs but when I resized the browser the text line broke and some of the text spilled out of the divs and containers. I tried using vh instead of px but the containers became a lot thinner when I made the page smaller and I didn't like that. Does anyone have any solutions? I am using Bootstrap 4.0 by the way.
This is my html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>StanCafe - Hello!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="profile.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght#700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<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>
<script src="https://kit.fontawesome.com/3b733e1950.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-star"></i> Snippets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-bell"></i> Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-envelope"></i> Messages</a>
</li>
</ul>
<a class="navbar-brand" href="#"><i class="fas fa-coffee"></i></a>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search StanCafe" aria-label="Search" id="search">
</form>
<a class="btn btn-primary" href="#" id="publish-button">Publish</a>
</div>
</div>
</nav>
<header>
<div id="cover-photo-wrapper">
<img src="background-image-cropped.png" alt="background-image">
</div>
<div id="profile-photo-wrapper">
<div class="container">
<div class="row">
<div class="col-4">
<img src="profile-picture-cropped.png" id="profile-photo" alt="profile-picture">
</div>
<div class="col-6">
Posts<span>320</span>
Following<span>600</span>
Followers<span>900</span>
Cafes<span>8</span>
</div>
<div class="col-2">
<button type="button" class="btn btn-outline-primary" id="follow-button">Follow</button>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-4" id="profile">
<hgroup>
<h1>Alya Tsarina</h1>
<h2>#allina</h2>
</hgroup>
<p>Jennie stan but go off lol</p>
<span id="location"><i class="fa fa-map-marker"></i> Moscow, Russia</span>
<span id="website"><i class="fa fa-link"></i> allina.com</span>
<span id="birthday"><i class="fas fa-birthday-cake"></i> Jan. 2020</span>
<a class="btn btn-primary" href="#" id="message-button">Message</a>
<a class="btn btn-primary" href="#" id="message-button">Edit Room</a>
<span><i class="fas fa-coffee"></i> Cafes you follow<span>
<div id="cafe-profile-photos">
<img src="https://via.placeholder.com/50x50" alt="cafe image">
<img src="https://via.placeholder.com/50x50" alt="cafe image">
<img src="https://via.placeholder.com/50x50" alt="cafe image">
<img src="https://via.placeholder.com/50x50" alt="cafe image">
<br />
<img src="https://via.placeholder.com/50x50" alt="cafe image">
<img src="https://via.placeholder.com/50x50" alt="cafe image">
<img src="https://via.placeholder.com/50x50" alt="cafe image">
<img src="https://via.placeholder.com/50x50" alt="cafe image">
</div>
</div>
<div class="col-8" id="posts">
<nav class="nav">
<a class="nav-link active" href="#">Posts</a>
<a class="nav-link" href="#">Room Gallery</a>
<a class="nav-link" href="#">Hearted</a>
</nav>
<article class="container">
<div class="row no-gutters">
<div class="col-1">
<img src="profile-picture-cropped.png" alt="profile-picture" class="profile-thumbnail">
</div>
<div class="col-11 post-body">
<span class="username-name">Alya Tsarina</span> <span class="username-handle">#allina</span>
<p>Ya'll BlackPink's album is gonna pop off so baaaad! The queens of kpop are rly coming.</p>
<nav>
<i class="fa fa-comment-o"></i> 217
<i class="fa fa-retweet"></i> 38
<i class="fa fa-heart-o"></i> 1, 278
</nav>
</div>
</div>
</article>
</div>
</div>
</div>
</body>
</html>
This is my CSS:
a, a:hover {
color: rgb(29,161,242);
}
body {
background-color: #E6ECF0;
}
.navbar {
background-color: white;
border-bottom: 1px solid #999;
}
.navbar-brand {
margin-left: 50%;
margin: 0px auto;
}
.navbar-brand i {
color:rgb(29,161,242);
}
#search {
background-color: #F5F8FA;
border-radius: 20px;
border: 1px solid #E6ECF0;
}
#search:focus {
background-color: white;
border: 2px solid rgb(29,161,242);
}
#publish-button {
background-color: rgb(29,161,242);
color: white;
border-radius: 20px;
border: none;
}
#publish-button:hover {
background-color: #329CC3
}
#cover-photo-wrapper {
height: 40vh;
overflow: hidden;
}
#cover-photo-wrapper img {
width: 100%;
}
#profile-photo-wrapper {
background-color: white;
border-bottom: 2px solid #CCC;
height: 60px;
position: relative;
}
#profile-photo {
width: 200px;
height: 200px;
border-radius: 100px;
border: 5px solid white;
position: absolute;
top: -110px;
}
.profile-stats {
float: left;
text-align: center;
width: 80px;
margin-top: 10px;
margin-left: 4px;
margin-right: 4px;
text-decoration: none;
color:#666;
font-size: 0.8em;
}
.profile-stats:hover {
text-decoration: none;
border-bottom: 2px solid rgb(29,161,242)
}
.profile-stats:hover span {
color: rgb(29,161,242);
}
.profile-stats span {
display: block;
margin: 0px auto;
font-size: 1.4em;
color: #444;
position: relative;
top: -4px;
}
#follow-button {
border-color: rgb(29,161,242);
color: rgb(29,161,242);
border-radius: 20px;
margin-top: 10px;
width: 100px;
font-weight: bold;
font-size: 0.8em;
}
#follow-button:hover {
background-color: #329CC3;
color: white;
}
#profile {
margin-top: 35px;
}
#profile h1 {
color: black;
font-size: 1.2em;
font-weight: bold;
}
#profile h2 {
font-size: 1em;
color: #333;
font-weight: normal;
position: relative;
top: -6px;
}
#profile p {
margin-top: 6px;
font-size: 0.9em;
}
#profile span {
display: block;
color: #333;
font-size: 0.9em;
margin-bottom: 4px;
}
#profile span .fa {
width: 15px;
}
#message-button {
background-color: rgb(29,161,242);
color: white;
border-radius: 20px;
border: none;
margin-top: 12px;
width: 100%;
margin-bottom: 12px;
}
#message-button:hover {
background-color: #329CC3
}
#cafe-profile-photos img {
border-radius: 25px;
margin-bottom: 4px;
}
#posts > nav {
margin-top: 10px;
background-color: white;
padding: 10px 0px;
border-bottom: 1px solid #E6ECF0;
}
#posts > nav a {
font-size: 1.2em;
font-weight: bold;
}
#posts > nav a.active {
color: #222;
}
#posts > nav a:hover {
text-decoration: underline;
}
#posts article {
background-color: #FFF;
border-bottom: 1px solid #E6ECF0;
padding: 15px;
}
#posts article:hover {
background-color: #F5F8FA;
}
#posts .profile-thumbnail {
height: 50px;
width: 50px;
border-radius: 25px;
}
#posts .post-body {
padding-left: 10px;
font-size: 0.9em;
}
#posts .post-username .username-name {
color: #333;
font-weight: bold;
}
#posts .post-username:hover {
text-decoration: none;
}
#posts .post-username:hover .username-name {
text-decoration: underline;
color: rgb(29,161,242);
}
#posts .post-username .username-handle {
color: #333;
font-weight: normal;
}
#posts .post-body nav a {
color: #657786;
padding: 0px 6px;
}
#posts .post-body nav a .fa {
margin-right: 5px;
}
#posts .post-body nav a:hover {
text-decoration: none;
color: rgb(29,161,242);
}
Fullscreen website
Resized website
Bootstrap4 came with many classes for viewport specific styling. You should also learn more about media query, which will help you to give styles to specific device width.
note :I havent gone through entire code thoroughlly
inorder to make it responsive try giving values in %.also try to use media query
eg:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
or
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
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>