so I was making a dashboard page for this bot and the page looks good on desktop , but isn't responsive on mobile devices.
THE PAGE ON DESKTOP
THE PAGE ON MOBILE DEVICES
THE CODE FOR PAGE
HTML
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link id="theme" href="/static/css/light.css" aria-labelledby="dark" rel="stylesheet">
<link href="/static/css/main.css" rel="stylesheet">
<title>Steve.</title>
</head>
<body>
<nav class="navbar navbar-expand-lg text-div">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<img id="navbar_dicord_brand" src="/static/images/discord_logo_black.svg" width="120" height="60">
</ul>
<ul class="nav navbar-nav navbar-center">
<li>
<a class="spacing" style="padding-right:.5em" href="#"></span><strong>Commands</strong></a>
<span id="number_badge" class="top-0 start-100 translate-middle badge rounded-pill" style="background-color: crimson;">16<span class="visually-hidden">unread messages</span>
</li>
<li><a class="spacing" href="https://top.gg/bot/834409783502438480/invite/"><strong>Invite</strong></a></li>
<li><a class="spacing" href="https://discord.gg/JEDu42vVBX"><strong>Support Server</strong></a></li>
<li><a class="spacing" href="https://www.patreon.com/ks47"><strong>Patreon</strong></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand a_text" href="https://top.gg/bot/834409783502438480">
<img src="/static/images/avtar.webp" width="45" height="45">
<strong>Steve.</strong>
</a>
</ul>
</div>
</nav>
<div class="body_container">
<div>
<center>
<div class="container text-div" style="width: fit-content;" >
<h1 class="display1 text_font">Anime and Manga in your Discord Server.</h1>
</div>
</center>
<div class="container text-div" style="margin-top:3%">
<div class="row">
<div class="col" style="text-align: left;">
<h1 class="display1"><img id="clyde_icon" src="/static/images/icon_clyde_black_RGB.svg" width="45px" height="45px"> {{count}} Guilds</h1>
</div>
<div class="col" style="text-align: center;">
<h1 class="display1"><img id="hash_icon" src="/static/images/hashtag.svg" width="45px" height="30px">{{channels}} Channels</h1>
</div>
<div class="col" style="text-align: right;">
<h1 class="display1"><img id="user_icon" src="/static/images/user_svg.svg"> {{users}} Users</h1>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase font-weight-bold">Footer text 1</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita sapiente sint, nulla, nihil
repudiandae commodi voluptatibus corrupti animi sequi aliquid magnam debitis, maxime quam recusandae
harum esse fugiat. Itaque, culpa?
</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3">
<div class="col-md-6 mb-md-0 mb-3">
<h5 class="text-uppercase font-weight-bold">Footer text 2</h5>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio deserunt fuga perferendis modi earum
commodi aperiam temporibus quod nulla nesciunt aliquid debitis ullam omnis quos ipsam, aspernatur id
excepturi hic.
</p>
</div>
</div>
</div>
</footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</html>
CSS 1
.spacing{
font-family: 'Whitney','Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;
text-decoration: none;
font-size: 20px;
}
a.spacing{
padding-left: 1.5em;
padding-right: 1.5em;
}
a.spacing:hover{
color: crimson;
}
.text_font{
font-family: 'Whitney','Helvetica Neue',Helvetica,Arial,'Lucida Grande','sans-serif';
}
.body_container{
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
font-family: 'Whitney','Helvetica Neue',Helvetica,Arial,'Lucida Grande','sans-serif';
font-size: 2vw;
}
CSS 2
body{
background-color: white;
background-image:url(/static/images/background1.jpg);
background-size: cover;
color: black;
}
.a_text{
color:rgb(0, 0, 0);
font-family: Whitney,'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;
}
a.a_text:hover{
color: crimson;
text-decoration: none;
}
.footer{
background-color:rgba(247, 247, 247, 0.884);
color: black;
margin-top: 10%;
padding-bottom: 2%;
position: fixed;
bottom: 0;
}
.text-div{
background-color: rgba(247, 247, 247, 0.882);
color: black;
}
.spacing{
color: black;
}
So I need to make sure that the divs in nav bar are responsive I TRIED Some #media queries but didn't got the desired results so is there a way that the navbar can be responsive and the center div objects would appear like a list
something like the image below
This is a simple example... But before...
Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the head section in your code -> Viewport Meta Tag.
Don't use <center> element to center content:
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
sourse: MDN - Center Element
Use flexbox, grid or positioning property -> Center Anything is CSS.
Some elements in your code (in navbar) doesn't have a closing tag.
The Code:
Open code in full screen and resize the window.
var burger = document.querySelector('.burger');
var list_container = document.querySelector('.list-container');
burger.addEventListener('click', () => {
list_container.classList.toggle('active');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {list-style-type: none;}
a {text-decoration: none;}
.navbar-container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
position: relative;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#media (min-width: 576px) {.navbar-container {max-width: 100%;}}
#media (min-width: 768px) {.navbar-container {max-width: 760px;}}
#media (min-width: 992px) {.navbar-container {max-width: 960px;}}
#media (min-width: 1200px) {.navbar-container {max-width: 1180px;}}
header {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fafafa;
border: 1px solid #eee;
height: 80px;
z-index: 999;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.logo-container a:link,
.logo-container a:visited {
display: flex;
justify-content: center;
align-items: center;
color: #151515;
}
.logo-container ion-icon {
color: #151515;
margin-right: 5px;
font-size: 40px;
}
.logo-container span {
font-size: 30px;
}
.list-container {
transition: all 0.2s;
}
.list-container.active {
transform: translateX(0);
}
.list-container ul {
display: flex;
}
.list-container ul li {
margin: 0 15px;
}
.list-container ul li a:link,
.list-container ul li a:visited,
.brand-container a:link,
.brand-container a:visited {
color: #151515;
font-weight: 600;
font-size: 20px;
}
.burger {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
display: none;
}
.burger span {
display: block;
width: 30px;
height: 4px;
background-color: #121212;
}
.burger span:not(:last-of-type) {
margin-bottom: 5px;
}
#media screen and (max-width:992px){
.list-container ul li a:link,
.list-container ul li a:visited {
font-size: 18px;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden;
}
.burger {
display: block;
}
.brand-container {
display: none;
}
.list-container {
position: fixed;
width: 100vw;
height: 100vh;
background-color: #fafafa;
top: 80px;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform: translateX(-100%);
}
.list-container ul {
flex-direction: column;
padding: 20px 10px;
}
.list-container ul li {
margin: unset;
}
.list-container ul li {
margin: 0 0 30px 0;
}
}
<script type="module" src="https://unpkg.com/ionicons#5.4.0/dist/ionicons/ionicons.esm.js"></script>
<header>
<nav class="navbar navbar-container">
<div class="logo-container">
<a href="#">
<ion-icon name="logo-discord"></ion-icon>
<span>Discord</span>
</a>
</div>
<div class="list-container">
<ul class="list">
<li>Commands</li>
<li>Invite</li>
<li>Support Server</li>
<li>Patreon</li>
</ul>
</div>
<div class="brand-container">
<a href="#">
<img src="..." alt="...">
<span>Steve</span>
</a>
</div>
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
Use flexbox with #media queries, it will help you. Change the flex-direction from raw to column on mobile device width. :)
Related
I am currently trying to make a sidebar, which has an 'X' button at the top right corner. I tried to use float: right in order to place it on the right but it doesn't work.
The anchor that I used for the cross is within a div, but I don't know why it doesn't seem to work. I don't think the css with .side-nav .btn-close contains the problem.
I think there's something wrong with the side-nav class.
*{
box-sizing: border;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display:flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color:white;
}
.navbar-links ul{
display:flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a{
text-decoration: none;
color:white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display:flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color:white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
float:right;
margin-right:25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Abvout</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="side-nav">
×
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
I have modified your code a little. It should work now.
I have added wrapper div to your button and the ul in sidebar. Since you are using position:fixed on .side-nav, you have to use position: absolute on the X Button.
* {
box-sizing: border;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color: white;
}
.navbar-links ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a {
text-decoration: none;
color: white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display: flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color: white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
float: right;
margin-right: 25px;
}
/* Added These 2 Wrapper class */
.btn-close-wrapper {
position: absolute;
display: block;
width: 100%;
text-align: right;
}
.ul-wrapper {
padding-top: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Abvout</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="side-nav">
<!-- Used wrapper div for close button and ul -->
<div class="btn-close-wrapper">
×
</div>
<div class="ul-wrapper">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
It is simply because float doesn't work on flex items. Your .side-nav has the display of flex. If you change it to block, it will work.
But my suggestion is not to use float at all. Because float is mainly for old newspaper-like text-image combination and using it to "structure the elements" was just a hack because of the lack of the flex-box.
So either stick with one of them (float or flex-box) Or better: make the close icon an absolutely positioned element to get it out of the flow:
*{
box-sizing: border-box;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display:flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color:white;
}
.navbar-links ul{
display:flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a{
text-decoration: none;
color:white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display:flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color:white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
margin-right:25px;
position: absolute;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Abvout</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="side-nav">
×
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
ALSO: Notice that box-sizing: border-box; is correct, not box-sizing: border;
I am trying to create a hero section for a layout. My problem is that the content (text and buttons) is being obscured by the overlay even after setting a higher z-index value.
Here's my code:
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Base Styles */
:root {
--primary-color: #c72727;
--secondary-color: #f99500;
--light-color: #f3f3f3;
--dark-color: #333;
--max-width: 1100px;
}
body {
font-family: 'Lato', sans-serif;
line-height: 1.5;
background: var(--light-color);
}
img {
width: 100%;
height: auto;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #777;
}
i.fab {
color: #777;
}
p {
font-weight: 100;
margin: 1rem 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Staatliches', cursive;
margin-bottom: 0.55rem;
line-height: 1.3;
margin: 0.5rem 0;
}
/* Utilities */
.container {
max-width: var(--max-width);
margin: auto;
padding: 20px;
}
.btn {
display: inline-block;
cursor: pointer;
padding: 13px 20px;
color: #fff;
}
.btn-primary,
.bg-primary {
background: var(--primary-color);
}
.btn-secondary,
.bg-secondary {
background: var(--secondary-color);
}
.btn-dark,
.bg-dark {
background: var(--dark-color);
}
.bg-light {
background: var(--light-color);
}
.category {
color: #fff;
text-transform: uppercase;
border-radius: 50%;
padding: 10px;
font-size: 10px;
}
.category-sports {
background: var(--secondary-color);
}
.category-entertainment {
background: #a66bbe;
}
.category-tech {
background: #009cff;
}
/* Header */
#header {
position: sticky;
top: 0;
left: 0;
right: 0;
}
#header .container {
display: grid;
grid-template-columns: 6fr 3fr 2fr;
align-items: center;
}
#header .logo {
width: 180px;
}
#header ul {
display: flex;
justify-content: center;
align-items: center;
}
#header ul li {
margin-right: 10px;
}
/* Showcase */
#showcase {
height: 500px;
color: #fff;
background: url('../images/featured.jpg') no-repeat center center/cover;
position: relative;
}
#showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
#showcase * {
z-index: 10000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NewsGrid | The Leading Online News Website</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<header id="header">
<div class="container">
<div class="logo">
<img src="./images/logo.png" alt="" />
</div>
<div class="social">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
</div>
<nav>
<ul class="nav">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
</ul>
</nav>
</div>
</header>
<!-- Showcase -->
<section id="showcase">
<div class="container">
<div class="showcase-content">
<span class="category category-sports">Sports</span>
<h1>Some Sports Article</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus
rerum officia quibusdam mollitia deserunt animi soluta laudantium.
Quam sapiente a dolorum magnam necessitatibus quis tempore facere
totam. Dolor, sequi distinctio!
</p>
READ MORE
</div>
</div>
</section>
</body>
</html>
I did set the Z-index for the showcase content to be in front of the image, but it doesn't work. I have tried an identical approach elsewhere and that works.
Am I doing something incorrectly?
Please help, Thanks!
This question already has answers here:
how to add vertical line between two divs
(6 answers)
Closed 3 years ago.
I'm trying to divide the content of a webpage in two parts. The left side for a navbar and the right side for the main content of the page. I'm trying to use hr tag to create a line and divide the two parts but I'm having problems.
This is the HTML code:
<div id="left_content">
<nav class="main-menu">
<ul>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">Stars Components</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="vertical-line" style="height: 500px;"></div>
<div id="right_content>
...
</div>
This is the CSS code:
div.vertical-line{
width: 0px;
height: 100%;
float: left;
border: 1px inset;
background-color: #eeeeee;
margin-left: 250px;
}
This is one screenshot of the problem.
Any suggestion? Thanks for reading.
Here is the minimal layout technique with modern flexbox layout
.split-layout {
display: flex;
flex-direction: column;
}
#media screen and (min-width: 30em) {
.split-layout {
flex-direction: row;
align-items: stretch;
}
}
.split-layout__item {
flex: 1;
}
#media screen and (min-width: 30em) {
.split-layout__item {
padding-left: 1em;
}
.split-layout__item:first-child {
padding: 0;
}
}
.split-layout__divider {
display: flex;
flex-direction: row;
align-items: center;
}
#media screen and (min-width: 30em) {
.split-layout__divider {
flex-direction: column;
}
}
.split-layout__label {
padding: 1em;
}
.split-layout__rule {
flex: 1;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
border-width: 1px 0 0 0;
}
#media screen and (min-width: 30em) {
.split-layout__rule {
border-width: 0 1px 0 0;
}
}
/* =DEMO STYLES
--------------------------------------------------------------------*/
html {
padding: 2em;
background: #3B4558;
color: #fff;
}
<div class="wrapper">
<div class="split-layout">
<div class="split-layout__item">
<h2>Navigation</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eos esse voluptates cupiditate expedita inventore, temporibus? In beatae hic tenetur molestiae facilis illo neque esse repellendus harum. A, consequatur, labore.
</p>
</div>
<div class="split-layout__divider">
<div class="split-layout__rule"></div>
<div class="split-layout__rule"></div>
</div>
<div class="split-layout__item">
<h2>Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eos esse voluptates cupiditate expedita inventore, temporibus?
</p>
</div>
</div>
</div>
Use CSS grid. CSS grid is great for content layout.
body {
font-family: Tahoma, sans-serif;
}
.grid {
display: grid;
grid-template-areas: 'cell-navbar cell-content cell-content cell-content';
}
.cell-navbar {
grid-area: cell-navbar;
border-right: thin solid #ccc;
}
.cell-content {
grid-area: cell-content;
}
body,
main,
.cell-navbar,
.cell-content {
height: 100vh;
}
<main class="grid">
<div class="cell-navbar">Navbar</div>
<div class="cell-content">Content</div>
</main>
More on CSS grid:
enter link description here
Try adding the following line to your CSS style
#left_content, #right_content { float:left; }
my preferred way of doing this,
<style>
#content { height: 100%; }
#left_content, #right_content {
float:left;
}
#left_content {
width:300px;
}
#right_content {
height:inherit;
padding-left:30px;
border-left:2px solid #000;
}
</style>
<body>
<div id="content">
<div id="left_content">
left side content goes here
</div>
<div id="right_content">
right side content goes here
</div>
</div>
</body>
Use flexbox instead, and draw the vertical line as border-right on #left_content:
.container{
display:flex
}
#left_content{
border-right: solid 1px #333;
padding-right:20px;
}
#right_content{
flex: 1 1 100%;
background-color: lightblue;
padding-left:20px;
}
<div class="container">
<div id="left_content">
<nav class="main-menu">
<ul>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">Stars Components</span>
</a>
</li>
</ul>
</nav>
</div>
<div id="right_content">
...
</div>
</div>
I'm currently creating media queries for my current project, the problem I'm currently facing is that something is causing my navbar to not be responsive below width of 600px. What happens is show in the attached image.
I've actually solved this problem once before in a previous project but can't remember how I solved this problem even after comparing the code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
<nav class="nav-bar">
<span class="open-slide">
<i class="fas fa-bars fa-2x"></i>
</span>
<ul class="nav-items">
<li>About</li>
<li>Events</li>
<li>Order</li>
<li>Locations</li>
</ul>
</nav>
</header>
<main>
<section id="about">
<div class="about-text">
<h1>Comics.Cards.Fun</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, neque ipsa nisi voluptatum distinctio asperiores dolorem obcaecati reiciendis sunt eaque veritatis omnis, rerum qui aperiam totam magnam sit facilis quod.</p>
</div>
</section>
<section id="events">
<h1>Events</h1>
<div class="cards-container">
<% Event.all.each do |event|%>
<div class="event-card">
<div class="overlay"></div>
<div class="event-date">
<span class="date"><%= event.date %></span>
</div>
<div class="event-image">
<%= image_tag event.image_url.to_s %>
</div>
<div class="event-data">
<div class="event-title">
<h3><%= event.title %></h3>
</div>
<p class="event-details"><%= event.description %></p>
</div>
</div>
<% end %>
</div>
</section>
<section id="order">
<h1>Order</h1>
<p>Looking for your monthly fix of comics? Just order from us!</p>
<div class="order-steps">
<div class="fill-form">
<i class="far fa-list-alt fa-10x"></i>
<p>
List down all the comics you wish to order.
</p>
</div>
<div class="email-us">
<i class="far fa-envelope fa-10x"></i>
<p>
Email it to us at the
<br>
lastcomicshop#gmail.com
<br>
Deadline is the 20<sup>th</sup> of every month
</p>
</div>
<div class="delivery">
<i class="fas fa-truck fa-10x"></i>
<p>
If you wish to have your comics delivered, just give us your address!
</p>
</div>
</div>
</section>
<section id="locations">
<h1>Locations</h1>
<div class="location-div">
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.8821426536624!2d101.61402541462657!3d3.1258517541674418!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc49cb25b5c01b%3A0xfcdf88c63a471fd6!2sThe+Last+Comic+Shop!5e0!3m2!1sen!2smy!4v1554862822510!5m2!1sen!2smy" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="address">
<p>
75A, Jalan SS22/23,
<br>
Damansara Utama,
<br>
47400 Petaling Jaya, Selangor
</p>
</div>
</div>
</section>
</main>
<footer>
<div id="contact-us">
<p>Connect with us:</p>
<div class="contact-outlets">
<i class="fab fa-facebook-square fa-3x"></i>
<i class="far fa-envelope fa-3x"></i>
</div>
</div>
</footer>
</body>
</html>
SCSS
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
}
// Navbar
.nav-bar {
width: 100%;
height: 8%;
display: flex;
position: fixed;
z-index: 1;
overflow: hidden;
justify-content: center;
align-items: center;
background-color: rgba(33, 33, 33, 0.9);
color: white;
}
.nav-bar > ul {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav-bar > ul > li {
list-style: none;
color: white;
padding: 0 2rem;
}
.nav-bar > ul > li > a {
text-decoration: none;
color: inherit;
font-family: 'Bree Serif', serif;
font-size: 21px;
}
// Sections
section {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
text-align: center;
color: white;
h1 {
font-family: 'Bree Serif', serif;
font-size: 53px;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 26px;
}
}
#about {
background-color: rgba(243, 63, 63, 0.8);
.about-text {
position: absolute;
top: 45%;
}
}
#events {
background-color: rgba(63, 63, 243, 0.8);
.cards-container {
position: absolute;
top: 25%;
width: 100%;
height: 100%;
display: flex;
}
}
#order {
background-color: rgb(25, 134, 25);
.order-steps {
position: absolute;
top: 35%;
display: flex;
flex-direction: row;
justify-content: space-around;
.fill-form,
.email-us,
.delivery {
width: 20%;
i {
padding-bottom: 1rem;
}
}
}
}
#locations {
background-color: rgb(245, 233, 63);
.location-div {
width: 100%;
position: absolute;
top: 25%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
}
#contact-us {
width: 100%;
background-color: rgba(0, 0, 0, 0.85);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.5rem 0;
p {
font-size: 1.2rem;
}
.contact-outlets {
width: 125px;
display: flex;
justify-content: space-between;
}
}
// Event cards
.event-card {
width: 30%;
height: 58%;
position: relative;
// background: url(https://idigitalcitizen.files.wordpress.com/2009/08/6x4-autobobots-logo.jpg) 50% / cover no-repeat;
margin: 0 1.3rem;
overflow: hidden;
border-radius: 8px;
box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.3);
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
visibility: hidden;
}
.event-date {
position: absolute;
top: 0;
left: 0;
padding: 0.8rem;
background-color: #77d7b9;
display: flex;
flex-direction: column;
.date {
font-size: 24px;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.month {
text-transform: uppercase;
}
.month,
.year {
font-size: 12px;
}
.event-image {
width: inherit;
height: inherit;
}
}
.event-data {
width: 100%;
height: inherit;
position: absolute;
bottom: 0;
z-index: 2;
padding: 0.8rem 0.5rem;
background-color: white;
color: black;
// Takes the height of the h3 tag with the class event-title and adds 3.5rem to hide the event details.
transform: translateY(calc(145px + 0.5rem));
transition: transform 0.5s;
.event-title {
font-family: 'Bree Serif', serif;
width: 100%;
height: 60px;
margin-bottom: 2rem;
}
.event-details {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
bottom: 0;
}
}
// When user hovers their mouse over the card, the event details pop up.
&:hover {
.overlay {
visibility: visible;
opacity: 0.5;
transition: opacity 0.5s, visibility 0.5s, ease;
}
.event-data {
transform: translateY(0);
transition: transform 0.5s;
}
}
}
// Responsive design
// Extra Small & Small devices
#media screen and (max-width: 600px) {
// navbar
.nav-bar {
ul {
display: none;
}
}
}
The problem is that you set your navbar to 100% width (which is fine), but since your iframe's width is 600px it allows your navbar to stretch all the way to reach this "100%" width. Change your iframe width to the page's width so your navbar and your page won't go off-boundary. Like this:
<iframe src="..." width="100%" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
Once that's done, I'd recommend reducing the nav items' font-size to have them all fit on your nav bar.
I'm building a sidebar menu and have screwed something up. When the content is longer than the viewport, and the user scrolls down, the sidebar is covered up by the content.
The sidebar should always stay at 100% height, with the .box div fixed at the bottom.
I've tried adjusting the position to absolute and fixed, and adjusting the main content area overflow to scroll and a whole bunch of other things and just can't get it to work.
What did I do wrong?
Here's a Fiddle
https://jsfiddle.net/timgavin/s3vga1mm/
The CSS
body {
font-family: 'Open Sans', sans-serif;
}
#topbar {
height: 60px;
background: #F3F3F3;
}
/* sidebar is expanded by default */
#sidebar-wrapper {
position: absolute;
z-index: 1;
width: 250px;
min-height: 100%;
overflow-y: hidden;
overflow-x: visible;
background-color: #0F2849;
transition:.5s;
}
/* hamburger icon */
#sidebar-toggle {
float: left;
padding: 18px 20px 0 20px;
}
/* main content wrapper */
#content-wrapper {
position: absolute;
width: 100%;
padding-left: 250px;
transition:.5s;
font-size: 1.1em;
}
/* change the sidebar's width to zero to collapse the sidebar */
#wrapper.sidebar-hidden #sidebar-wrapper {
width: 0;
}
/* remove padding from main content so it collapses left with the sidebar */
#wrapper.sidebar-hidden #content-wrapper {
padding-left: 0;
}
/* add some padding to the top of the main content area without altering bootstrap classes */
#container-fluid {
padding-top: 20px;
}
/* TOP MENU CLASSES */
.logo {
width: 250px;
background-color: #0F2849;
height: 60px;
padding-top: 5px;
overflow: hidden;
float: left;
}
.logo img {
height: 45px;
}
.top-menu a {
color: #222;
}
.top-menu a:hover {
color: #82C2FA;
text-decoration: none;
}
.top-links {
float: left;
list-style: none;
padding: 2px 0 0 0;
}
.top-links li {
float: left;
padding: 20px 10px;
}
/* SIDE MENU */
.sidebar-nav {
padding: 20px 0 0 0;
list-style: none;
font-size: 1.1em;
}
.sidebar-nav li {
text-indent: 10px;
line-height: 44px;
width: 250px;
}
/* icon padding */
.sidebar-nav li i {
padding-right: 7px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li a:hover {
background-color: #0F2849;
color: #fff;
text-display: bold;
}
/* sub-menu links */
.sidebar-nav .panel-body a {
color: #87B2ED;
font-size: 0.9em;
}
.sidebar-nav .caret {
float: right;
margin: 22px 15px 0;
}
#sidebar-wrapper .box {
position: fixed; /* remove this style if you want the box to float directly below the menu */
bottom: 0; /* remove this style if you want the box to float directly below the menu */
border: 1px solid #3E526D;
border-radius: 5px;
margin: 40px 10px 10px 10px;
width: 230px;
padding: 10px
}
#sidebar-wrapper .box h4 {
color: #B8C0C9;
font-size: 1.1em;
margin: 0 0 20px 0;
}
#sidebar-wrapper .box h5 {
color: #87B2ED;
}
/* SUB MENU */
/* remove bootstrap's default panel styling */
.sidebar-nav .panel {
background: transparent;
border: 0;
padding: 0;
margin: 0;
}
.sidebar-nav .panel-body {
padding: 0;
background: #0F2849;
}
.sidebar-nav .panel-body ul {
list-style: none;
padding: 0;
}
.sidebar-nav .panel-body ul > li {
text-indent: 48px;
}
/* RESPONSIVE CLASSES */
/* mobile & tablet */
#media only screen and (max-width : 992px) {
/* sidebar is hidden by default */
#sidebar-wrapper {
width: 0;
}
/* content is flush-left by default */
#content-wrapper {
padding-left: 0;
}
/* change the sidebar's width to 250px to expand the sidebar */
#wrapper.sidebar-hidden #sidebar-wrapper {
width: 250px;
}
/* add padding to main content so it expands left with the sidebar */
#wrapper.sidebar-hidden #content-wrapper {
padding-left: 250px;
}
.logo {
width: 80px;
padding: 15px 7px 0 0;
}
.logo img {
height: auto;
}
}
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="assets/css/app.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- top links, logo, hamburger icon, etc. -->
<div id="topbar">
<div class="logo">
<!-- remove <a> if desired, it has no affect on layout -->
<a href="/">
<!-- logo for desktop -->
<img src="assets/img/logo.png" class="hidden-xs hidden-sm hidden-md img-responsive center-block" alt="Company logo">
<!-- logo for mobile and tablet -->
<img src="assets/img/logo-sm.png" class="visible-xs visible-sm visible-md img-responsive center-block" alt="Company logo">
</a>
</div>
<div class="top-menu">
<!-- hamburger icon -->
<a href="#" id="sidebar-toggle">
<i class="fa fa-bars fa-fw fa-2x"></i>
</a>
<!-- top navigation links -->
<ul class="top-links">
<li>
<a href="#">
Link 1
</a>
</li>
<li>
<a href="#">
Link 2
</a>
</li>
</ul>
</div>
</div>
<!-- sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<!-- start collapsable menu item with sub-menu -->
<!--
duplicate as often as needed, just make sure to give
each instance a unique ID (#id-goes-here)
-->
<li class="panel panel-default">
<a href="#id-goes-here" data-toggle="collapse">
<i class="fa fa-ticket"></i>
<span>
Tickets
</span>
<span class="caret"></span>
</a>
<div id="id-goes-here" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>
<a href="#">
<span>
Link 1
</span>
</a>
</li>
<li>
<a href="#">
<span>
Link 2
</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<!-- end collapsable menu item with sub-menu -->
<!-- regular menu items without sub-menu -->
<li>
<a href="">
<i class="fa fa-pie-chart"></i>
<span>
Reports
</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-sign-out"></i>
<span>
Log Out
</span>
</a>
</li>
</ul>
<div class="box">
<h4>Support</h4>
<!--
// uncomment if you want titles
<h5>Email</h5>
-->
<p class="small">
<a href="mailto:email#email.com">
email#email.com
</a>
</p>
<!-- <h5>Call</h5> -->
<p class="small">
<a href="tel:877-379-8279">
123-456-7890
</a>
</p>
</div>
</div>
<!-- main content -->
<div id="content-wrapper">
<!-- .container-fluid to take up full width -->
<div class="container-fluid" id="container-fluid">
<!-- add main content here -->
<div class="row">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- stop main content here -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
Yo timgavin, take a look at this and tell me what you think or if there's any changes you want me to make for you! https://jsfiddle.net/s3vga1mm/4/
Here are my changes to your CSS.
#topbar {
height: 60px;
background: #F3F3F3;
position: fixed; /* Added this */
z-index: 200; /* Added this */
width: 100%; /* Added this */
}
/* Added this */
#sidebar-toggle:focus {
outline: none;
}
#content-wrapper {
position: absolute;
width: 100%;
transition:.5s;
font-size: 1.1em;
padding-left: 250px!important; /* Changed this */
margin-top: 50px; /* Added this */
}
#sidebar-wrapper {
position: fixed; /* Changed this */
z-index: 1;
width: 250px;
min-height: 100%;
overflow-y: hidden;
overflow-x: hidden; /* Changed this */
background-color: #0F2849;
transition:.5s;
}
Remove the position and display it as block.
display: inline-block;