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. :)
I am trying to align the header, body, footer, and div's vertically in one column such that the web design is responsive (looks good on different screen sizes): ConfluenceInfinite.org or see dev subdomain below.
For people who are new to html and css (like me) this is a pure css/html implementation/markup including the menu.
You can go to my development subdomain to see the issue first-hand:
my development subdomain: dev.confluenceinfinite.org
I have done LOT of research on this. Here is some of that research:
I don't believe this question/answer applies to my issue because my issue is vertical alignment (correct me if I am wrong). It uses fixed px values, which won't work for cell phones, and I tried the display: inline-block, but it didn't work. Here is the link to the SO question:
click here
This question/answer (which got via searching OS tag vertical-alignment) also has a fixed width that I do not want to do because I want the <div>s to be fully dynamic for all screen sizes: click here
I don't think this helps either because it aligns elements within a container, but I want the containers/div's aligned. Am I missing something?:
click here
This solution has the correct title/heading, but aligns things on the "right" vertically, which don't seem applicable to my issue:
Click here
I used to use a website or program that allowed a developer to test/visualize website design on multiple screen sizes. I can no longer find that site. If you know the location of that site, please comment or put it in your answer. Thanks!
Here is my index/home page html markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="icon" type="/images/png" href="/images/CII - favicon for website - 2020-09-17 0435.png" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/StylePage.css" />
<link rel="stylesheet" href="/StyleMenu.css" />
<title>CII - Optimizing change for the benefit of all.</title>
</head>
<body>
<header>
<!-- start ============================================================================ menu (goes in header) ============================== start -->
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger">
<div class="ClassForTidy"></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>
Home
</li>
<li>
Team
</li>
<li>
About Us
</li>
<li>
Definitions
</li>
<li>
Have Doubts?
</li>
<li>
Contact Us
</li>
<li>
Donate Today
</li>
<li>
Get Involved
</li>
<li>
The Movement
</li>
<li>
c11
</li>
<li>
The CEO's Story
</li>
<li>
News
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- end ============================================================================ menu (goes in header) ============================== end -->
<!-- start ============================================================================ header text ============================== start -->
<p id="HeaderText">-------------------- SITE UNDER CONSTRUCTION -------------------- this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</p>
<!-- end ============================================================================ header text ============================== end -->
</header>
<div class="site-wrap">
<!-- start ============================================================================ logo region ============================== start -->
<figure class="fig_logo_reg">
<img src="/images/CII_Logo.PNG" class="img_logo_reg" />
</figure>
<!-- end ============================================================================ logo region ============================== end -->
<!-- start ============================================================================ start page content ============================== start -->
<!-- start ============================================================================ paste content below ============================== start -->
<div class="container showcase-inner">
<br />
<br />
<h1 style="font-size:30px; color: black; padding: 10px 0 0 0; margin: 30px 0; line-height: 30px;">Why doesn't the system favor "the good guy"? Let's rig the system in your
favor.</h1>
<h1 style="font-size:30px; color: black; padding: 10px 0 0 0; margin: 30px 0; line-height: 30px;">We know how to fund the "unicorn" and tame the "machine" whilst compelling
people to change how they think, work, and have fun so it benefits good people, without breaking any laws. Truly.</h1>
<br />
<p>The world is focused on money, getting people’s attention, and offering goods and service at an equilibrium price
where both the lowest financial cost and highest financial gain are at. CII is focused on destroying this “machine”
and system of values in a legal, ethical, and morally sound way. CII has created technology that will facilitate,
perpetuate, and maintain the new system by optimizing change for the benefit of all that will connect good people,
produce optimal “humanitarian value” output, and simultaneously destroy the old system over time. CII will facilitate
this with the help of good people in a way that will protect individuals and their livelihood achieving a better system
for society.</p>
Read More this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue
</div>
<!-- end ============================================================================ paste content above ============================== end -->
</div>
<!-- start =============================================================== footer ============================================= end -->
<footer>
<div class="navLeftFooter nav-globe" id="navFooter">
<a href="#top" id="navBackToTop">
<div class="navFooterBackToTop">
<span class="navFooterBackToTopText">Go Back to Top of Page - this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</span>
</div>
</a>
<div class="navFooterVerticalColumn navAccessibility" role="presentation">
<div class="navFooterVerticalRow navAccessibility" style="display: table-row;">
<div class="navFooterLinkCol navAccessibility">
<div class="navFooterColHead">Get to Know Us</div>
<ul>
<li class="nav_first">
Careers & Volunteer
</li>
<li>
Blog
</li>
<li>
About CII
</li>
<li>
Sustainability
</li>
<li>
News & Press Center
</li>
<li>
Donor Relations
</li>
</ul>
</div>
<div class="navFooterColSpacerInner navAccessibility"></div>
<div class="navFooterLinkCol navAccessibility">
<div class="navFooterColHead">Get Involved with CII's Platform</div>
<ul>
<li class="nav_first">
Become an Affiliate
</li>
<li>
Become a Strategic Partner
</li>
<li>
Offer Your Product or Service/"Advertise"
</li>
<li>
Submit an Ideology for Consideration
</li>
<li>
Submit an Idea for Consideration
</li>
<li>
Submit a Core Value for Consideration
</li>
<li>
Submit a Concept for Consideration
</li>
<li>
Submit a Core Change for Consideration
</li>
<li>
Submit Anything Else
</li>
</ul>
</div>
<div class="navFooterColSpacerInner navAccessibility"></div>
<div class="navFooterLinkCol navAccessibility">
<div class="navFooterColHead">Connect with People</div>
<ul>
<li class="nav_first">
The Movement
</li>
<li>
c11
</li>
<li>
CII
</li>
</ul>
</div>
<div class="navFooterColSpacerInner navAccessibility"></div>
<div class="navFooterLinkCol navAccessibility">
<div class="navFooterColHead">Help People</div>
<ul>
<li class="nav_first">
c11 - this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue
</li>
<li>
Report Something
</li>
<li>
Pay Something Forward
</li>
<li>
Report a "Do-gooder"
</li>
<li>
Report a High Humanitarian Value Output Organization
</li>
<li>
Report a High Humanitarian Value Output Business
</li>
<li>
Report a High Humanitarian Value Output nonprofit
</li>
<li>
Report a High Humanitarian Value Output Government/Country
</li>
<li class="nav_last">
Help
</li>
</ul>
</div>
</div>
</div>
<div class="nav-footer-line"></div>
<div class="navFooterLine navFooterLinkLine navFooterPadItemLine">
<div class="navFooterLine navFooterLogoLine">
<figure id="FigLogoTiny">
<img src="/images/CII%20-%20favicon%20for%20website%20-%202020-09-17%200435.png" />
</figure>
</div>
<div class="navFooterLine"></div>
</div>
</div>
</footer>
<!-- end ============================================================================ footer ============================== end -->
</body>
</html>
Here is the style.css:
/* imports see https://medium.com/#elad/normalize-css-or-css-reset-9d75175c5d1e#_=_ */
#import "resets/normalize.css";
#import "resets/reset.local.css";
#import "resets/typography.css";
/* CORE STYLES */
:root {
--primary-color: rgba(255, 255, 255, 0.75);
--overlay-color: rgba(24, 39, 51 , 0.85);
--menu-speed: 0.75s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
}
header {
transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
background: var(--cds-ui-background, #fff);
border: none;
max-width: 100vw; /*99rem;*/
margin-left: 0;
margin-right: 0;
margin-bottom: 1px;
position: relative;
z-index: 5999;
position: fixed;
top: 0;
right: 0;
left: 0;
display: flex;
align-items: center;
height: 3rem;
background-color: #161616;
border-bottom: 1px solid #393939;
color: white;
text-align: center;
display: block;
}
#HeaderText {
margin-bottom: auto;
margin-top: auto;
margin-left: 0;
margin-right: 0;
color: white;
padding-top: 12px;
}
#SharePopup {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 60px;
/* height: 60px; */
padding: 1rem;
/* background: var(--primary-color); */
display: flex;
align-items: center;
justify-content: center;
box-sizing: inherit;
height: 3rem;
color: white;
text-align: right;
cursor: pointer;
background: #06D85F;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#SharePopup:hover {
background: white;
color: black;
}
h1 {
line-height: 35px;
font-size: 23px;
padding-bottom: 0;
padding-top: 15px;
text-align: center;
}
h2 {
line-height: 35px;
font-size: 23px;
padding-bottom: 0;
padding-top: 0px;
text-align: left;
}
.container {
max-width: 100vw;
margin: auto;
overflow: hidden;
/*removed on 2020-09-28 to get text to spread accross screen more and not be so scrunched/narrow in the div/tall etc*/
/* padding: 0 3rem; */
}
.showcase {
background: var(--primary-color);
color: #fff;
height: 100vh;
position: relative;
}
.showcase:before {
content: '';
/* background: url('https://images.pexels.com/photos/533923/pexels-photo-533923.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center center/cover;*/
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
.showcase .showcase-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 80%;
}
.showcase h1 {
font-size: 4rem;
padding: 15px;
}
.showcase p {
font-size: 1.3rem;
color: black;
}
.site-wrap {
min-width: 100vw;
min-height: 100vh;
/* background-color: #ffffff; /* white */
/* position: relative; */
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
padding: 4em; /*spaces out content from hamburger*/
}
.site-wrap img {
max-width: 100vw; /*60% */
max-height: 45vh; /*60% */
display: block;
margin-left: auto;
margin-right: auto;
}
.site-wrap p {
padding: 5px;
}
.site-wrap figure {
align-items: center;
}
.site-wrap ul
, li {
padding: 5px;
margin-left: 5px;
padding-left: 15px;
}
.container.showcase-inner .btn {
display: inline-block;
border: none;
background: white; /*var(--secondary-color);*/
color: black;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
transition: opacity 1s ease-in-out;
text-decoration: none;
border:1px solid black;
border-radius: 25px;
/*fixmeben*/
text-align: center;
display: block;
}
.btn:hover {
opacity: 0.7;
background: gray;
}
/* footer stuff */
#navFooter.navLeftFooter .navFooterBackToTop .navFooterBackToTopText {
color: white;
}
#navFooter .navFooterBackToTop span {
display: block;
text-align: center;
color: #111;
padding: 15px 0;
line-height: 19px;
font-size: 13px;
}
#navFooter a, #navFooter span {
font-family: inherit;
white-space: normal;
}
#navFooter a:link, #navFooter a:visited {
font-family: inherit;
color: #004B91;
text-decoration: none;
}
a, a:active, a:link, a:visited {
text-decoration: none;
color: #0066c0;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
}
.a-ember body {
font-family: Arial,sans-serif;
}
body {
color: #0F1111;
}
body {
font-size: 13px;
line-height: 19px;
font-family: Arial,sans-serif;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
#navFooter.navLeftFooter .navFooterBackToTop {
margin-bottom: 40px;
background-color: gray;
}
#navFooter .navFooterBackToTop {
background-color: #f3f3f3;
margin-bottom: 25px;
}
/* * { */
/* -moz-box-sizing: border-box; */
/* -webkit-box-sizing: border-box; */
/* box-sizing: border-box; */
/* } */
user agent stylesheet
div {
display: block;
}
#navFooter a:link, #navFooter a:visited {
font-family: inherit;
color: #004B91;
text-decoration: none;
}
#navFooter a, #navFooter span {
font-family: inherit;
white-space: normal;
}
a, a:active, a:link, a:visited {
text-decoration: none;
color: #0066c0;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
}
/* body { */
/* color: #0F1111; */
/* } */
/* body { */
/* font-size: 13px; */
/* line-height: 19px; */
/* font-family: Arial,sans-serif; */
/* } */
/* html { */
/* font-size: 100%; */
/* -webkit-text-size-adjust: 100%; */
/* } */
/* start footer table 1 starting with Get to know us */
#navFooter .navAccessibility.navFooterVerticalColumn {
display: table;
margin: 0 auto;
}
#navFooter.navLeftFooter .navFooterVerticalColumn {
/* changed 2020-09-28 18:10 */
max-width: 100vw;
background: rgb(105,105,105);
}
#navFooter .navAccessibility.navFooterVerticalRow {
display: table-row;
}
#navFooter .navAccessibility.navFooterLinkCol {
display: table-cell;
padding: 0 10px;
}
#navFooter .navAccessibility.navFooterLinkCol {
line-height: 120%;
}
.navFooterLinkCol {
color: #333;
vertical-align: top;
}
#navFooter.navLeftFooter .navFooterColHead {
font-weight: 700;
}
.navFooterColHead {
font-family: inherit;
color: white;
font-size: 16px;
margin: 6px 0 14px 0;
white-space: nowrap;
}
.navFooterLinkCol ul {
padding: 0;
margin: 0;
}
.a-ordered-list, .a-unordered-list, ol, ul {
padding: 0;
}
.a-unordered-list, ul {
margin: 0 0 0 18px;
color: #111;
}
#navFooter.navLeftFooter .navFooterLinkCol ul li {
margin: 0 0 10px;
}
.navFooterLinkCol ul li {
list-style-type: none;
white-space: nowrap;
margin: 0 0 8px 0;
}
.a-ordered-list li, .a-unordered-list li, ol li, ul li {
word-wrap: break-word;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 25px;
padding: 0px;
}
.a-unordered-list li, ul li {
list-style: disc;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.a-unordered-list, ul {
margin: 0 0 0 18px;
color: #111;
}
#navFooter .navAccessibility.navFooterLinkCol {
line-height: 120%;
}
.navFooterLinkCol {
color: #333;
vertical-align: top;
}
#navFooter.navLeftFooter a.nav_a:link, #navFooter.navLeftFooter a.nav_a:visited, #navFooter.navLeftFooter li.nav_a_carat span.nav_a_carat {
color: #DDD;
}
#navFooter a:link, #navFooter a:visited {
font-family: inherit;
color: #004B91;
text-decoration: none;
}
#navFooter a, #navFooter span {
font-family: inherit;
white-space: normal;
}
a, a:active, a:link, a:visited {
text-decoration: none;
color: #0066c0;
}
/* working on navFooterColSpacerInner */
#navFooter .navAccessibility.navFooterColSpacerInner, #navFooter .navAccessibility.navFooterLinkCol {
display: table-cell;
padding: 0 5px;
}
.navFooterVerticalColumn .navFooterColSpacerInner {
width: 5%;
padding: 0 15px;
}
#navFooter.navLeftFooter .nav-footer-line {
border-top: 1px solid #3a4553;
margin-top: 40px;
}
#navFooter.navLeftFooter div.navFooterLine {
/* working */
max-width: 25%;
}
#navFooter.navLeftFooter .navFooterLinkLine {
margin: 10px auto;
}
#navFooter.navLeftFooter .navFooterLogoLine, #navFooter.navLeftFooter .navFooterPadItemLine {
text-align: center;
max-width: 100vw;
margin: 30px auto 15px;
}
div.navFooterLine {
font-family: inherit;
color: #767676;
font-size: 11px;
text-align: center;
line-height: 18px;
white-space: nowrap;
}
.navFooterLinkLine {
margin: 0 8px 0 8px;
}
#navFooter a, #navFooter span {
font-family: inherit;
white-space: normal;
}
.navFooterPadItemLine a, .navFooterPadItemLine span {
padding: 0 .6em;
}
.navFooterLinkLine span, .navFooterLinkLine ul {
list-style-type: none;
display: inline-block;
padding: 0;
margin: 0;
}
#navFooter.navLeftFooter div.navFooterLine {
font-size: 12px;
}
#navFooter.navLeftFooter .navFooterLogoLine, #navFooter.navLeftFooter .navFooterPadItemLine {
text-align: center;
max-width: 100vw;
margin: 30px auto 15px;
}
div.navFooterLogoLine {
margin: 30px 8px 4px 8px;
font-size: 1px;
line-height: 0;
}
div.navFooterLine {
font-family: inherit;
color: #767676;
font-size: 11px;
text-align: center;
line-height: 18px;
white-space: nowrap;
}
a, a:active, a:link, a:visited {
text-decoration: none;
color: #0066c0;
}
#navFooter .nav-logo-base {
background-position: -10px -90px;
width: 76px;
height: 23px;
margin: 0 auto;
background: url('/images/CII_Logo.png');
}
.nav-globe .nav-globe, .nav-globe .nav-icon {
/* background-color: black; */
}
#FigLogoTiny {
/*working*/
/* max-width: 5%; */
max-height: 5%;
display: block;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* position: absolute; */
/* bottom: 100%; */
/* right: 100%; */
}
I am happy to include the imports if that is helpful. I assume you can see that by inspecting the website directly, but I am happy to edit this question to include the import css. Trying to keep the question as organized and short as possible.
I will be watching this question to see if anyone needs anything further to answer it or provide any assistance at all. I will edit the question as soon as possible if necessary. Thanks!
PS - I'm trying to make the solution/my website work across all browsers and all screen sizes without any scripts, if that is possible.
PSS - On a computer you have to size the window down to see the issue...that's what I did in the computer screenshot above to illustrate the issue.
EDIT-1: I should also state that the preferable responsiveness/dynamic/movement/etc. for the footer is to have a div column slide down below the other div columns if it doesn't fully fit on the page/isn't all visible to the user.
I really appreciate the focus and politeness of your question. I’ve barely seen something like that. As for the issue, I split it in two parts, one for the image and one for the footer. Responsive Web Design is definitely what you’re looking for. As for the image, replace
.site-wrap img {
max-width: 100vw;
...
}
with
.site-wrap img {
max-width: 100%;
...
}
As for the footer, things get a little bit more complicated, so I show a simple example of what you can do:
* { margin: 0; padding: 0; }
p { flex: 1; }
#one { background: red; }
#two { background: pink; }
#three { background: green; }
div { display: flex; flex-direction: row; }
#media (min-width: 500px) {
div { flex-direction: column; }
}
<div>
<p id="one">
First
</p>
<p id="two">
Second
</p>
<p id="three">
Third
</p>
</div>
If you open this page full size and resize the viewport of the browser, you can see how the elements are placed vertically to make the most out of the available space.
Here is the simplest example I found to solve the footer issue. This allows the footer divs to come down and create a new row as the screen is resized. Its a bit over simplified, but easy to understand. Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: Blue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>text - XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>
</body>
</html>
...it is a slight modification of this example:
Click here
Rene van der Lende's comment contains the code I ended up using to solve the same issue as the code above (the footer) but with a more professional look...sort of. It has a bit more eye candy/more professional look, but is much more complex to understand for a beginner: Click Here
Here is the code from the link above, but you can see it in action in the link above:
<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, user-scalable=1">
<title>Example for MadBoy</title>
<style id="ers-globals-default">
/**************************/
/* preferred global rules */
/**************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, * { box-sizing: inherit }
body { margin: 0 }
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
/***************************************/
/* responsive FLEXBOX bands and blocks */
/***************************************/
/*
For use as easy 'landingpage' content containers
[band] - horizontal content like a strip
[block] - vertical content like a list
- Can both be used interchangeably and nested
(band of blocks, block of bands, band of blocks holding bands of...)
- Invert orientation with 'rows'/'cols' parameter ( *= means: contains )
*/
[band],[block] { display: flex; position: relative; overflow: hidden }
[band],[block] { justify-content: center; align-content: center }
[band],[band*="cols"] { flex-flow: row wrap } /* a row of columns, default */
[band*="rows"] { flex-flow: column wrap } /* a column of rows */
[block],[block*="rows"] { flex-flow: column wrap } /* inverse default of [band] */
[block*="cols"] { flex-flow: row wrap }
.padded,
[padded="1"],
[padded="0"] [band*="padded"],
[padded="0"] [block*="padded"] {
/*
responsive page padding using y = mx + b
and responsive band/block padding (same as responsive page padding, but at band/block level)
p1(320,32) p2(1920, 72) => 0.025x + 24
p3(320, 8) p4(1920,320) => 0.195x - 54.4
'band/block padding' is only active when 'page padding' is off
*/
padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}
</style>
<style id="stl-cards-default">
/****************/
/* FLEXBOX Card */
/****************/
/* Everything card related is FBL */
[band*="cards"]>*,
[card],[card]>* { display: flex; flex-wrap: wrap }
/* generic 'band' holding 1:N cards */
[band*="cards"]>* {
flex-basis: auto; /* Workaround, see comment below */
/* default width (4 to 6 vp columns, depends on [band] L/R padding) */
width: calc(1.9375vw + 277.8px); /* (320,284)(1920,315) */
/*
The preferred rule is flex-basis: calc(1.9375vw + 277.8px), without 'width' defined,
but I use border-box box model throughout this demo (and anywhere else b.t.w.), so:
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
"When a non-auto flex-basis is specified, Internet Explorer 10 and 11
always use a content-box box model to calculate the size of a flex item,
even if 'box-sizing: border-box' is applied to the element. See Flexbug #7 for more info."
Flexbug #7, https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box
See Flexbug #8 too, why 'flex-grow: 1' has to used for IE11 instead of 'flex: 1'
*/
flex-grow : 1; /* set to 0 for non-stretching cards */
/* align-self: flex-start; /* 'stretch' is preferred as 'flex-start' yields jagged heights */
}
/* TODO: maybe introduce W/H dependency with MQ 'orientation' */
[card] {
flex-direction: column; /* VERTICAL container of header,content,footer */
justify-content: space-between; /* moves header/footer to top/bottom of card */
width: 100%; height: 100%; /* for IE11 */
flex-wrap: nowrap;
}
[card]>* { width: 100%; max-width: 100% } /* All card main rows: fill-width */
[card]>item {
flex-direction: column; /* COLUMN of 1:N rows */
flex-grow: 1; /* card content, fill max available space */
overflow: auto; /* scroll content in case card max-height set */
}
</style>
<style id="stl-card-demo">
/*******************************************/
/* [OPTIONAL] Card eye-candy and animation */
/*******************************************/
[band*="header"],
[band*="cards"] { background-color: rgba( 75, 84,104,.6);color: rgba(255,255,255,.8) }
[band*="cards"]>* { /* 'height' must have VW too, otherwise ratios will be incorrect */
/* height : calc((1.9375vw + 277.8px) * 1.77778); /* Fixed W/H ratio 16:9 */
/* max-height: calc((1.9375vw + 277.8px) * 1.77778);
/* Adjust 'max-height' to choosen ratio or 0 in case of 'auto' (or remove) */
cursor: pointer; /* It's animated, ok? So, no...clicker-de-click */
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none
}
[card]>header { justify-content: center }
[card]>footer { justify-content: flex-end }
/*
minimal padding around cards, but only if not already padded
(nasty little trick with selector preference => [padded] will not work here
because of same preference as [band])
*/
[band*="cards"]:not(.padded),
[band*="cards"]>* { padding: calc(0.125vmin + 1.6px)} /* 2,4>1920 */
[card] > :not(.media) { padding: calc(0.5vmin + 14.4px) } /* 16,24>1920 */
[card] {
background-color: rgba(255,255,255,1); /* white */
color: rgba( 89, 89, 89,1); /* Davy's Grey */
opacity: .95; /* for a subtle color diffence on :hover */
/* Google Material Components Web default card elevation */
box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
0px 1px 1px 0px rgba(0,0,0,.14),
0px 1px 3px 0px rgba(0,0,0,.12); /* elevation 1dp */
}
[card]:hover {
opacity: 1; /* ditto */
box-shadow: 0px 3px 5px -1px rgba(0,0,0,.20),
0px 5px 8px 0px rgba(0,0,0,.14),
0px 1px 14px 0px rgba(0,0,0,.12); /* elevation 5dp */
}
[card]:active,
[card]:focus { transform: scale(0.995) }
</style>
<style id="ers-utility-default">
/**************************************************/
/* Utility rules, first so they can be overridden */
/**************************************************/
body { cursor: default } /* Plain arrow for everything, but... */
input { cursor: auto } /* ...use HTML default cursor on inputs, unless it is an: */
input[list="datalist"],input[type="button"],input[type="checkbox"],input[type="radio"],
input[type="color"],input[type="range"],input[type="reset"],input[type="file"],input[type="submit"],
label:not([for=""]),
a,button,select,keygen { cursor: pointer }
[contenteditable="true"] { cursor: text }
/* Darker/more contrast text (put in <body>)
=> GPU intensive, set default to "0" if document scroll feels too sluggish. */
[cleartype="1"] { text-shadow: .1px .1px .2px hsla(0,0%,15%,.35),
-.1px -.1px .2px hsla(0,0%,15%,.25) }
h1,h2,h3,h4,h5,h6,b,
[cleartype="0"],strong { text-shadow: none } /* exceptions, no need to go even 'bolder' */
/* prohibit user from selecting text (put in <body>) */
.noselect,[select="0"],[noselect] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.select ,[select="1"],[select] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text }
/* enable user to select text (put in specific elements) */
[push*="R"] { margin-left : auto } /* push elements Right/Left/Top/Bottom */
[push*="L"] { margin-right : auto }
[push*="T"] { margin-top : auto }
[push*="B"] { margin-bottom: auto }
[align*="C"] { text-align: center } /* text alignment */
[align*="J"] { text-align: justify }
[align*="L"] { text-align: left }
[align*="R"] { text-align: right }
[hide], [data-hide="1"] {
display: none; position: absolute; overflow: hidden; clip: rect(0 0 0 0);
z-index: -999999; top: -999999px; margin: -1px; padding: 0; border: 0;
height: 1px; width: 1px; min-height: 0; min-width: 0; max-height: 0; max-width: 0
}
::-moz-focus-inner { padding: 0; border: 0 } /* Firefox */
:focus { outline: dotted rgba(60,69,78,.5) 2px }
:focus { outline: -webkit-focus-ring-color auto 0; outline-width: 0 } /* for Edge 2020 */
/* show all elements with outlines (put in <body>) */
[outlines="1"] * { outline: 1px dashed }
</style>
</head>
<body padded="0" cleartype="0" outlines="0">
<div block>
<header band="header">
<h1>headline</h1>
</header>
<article band="list.cards" class="padded">
<div>
<div card>
<img class="media" src="https://via.placeholder.com/320x240">
<header><h3>interactive SVG</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=1">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=2">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=3">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=4">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=5">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=6">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=7">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=8">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
<div>
<div card>
<img class="media" src="https://picsum.photos/320/240?random=9">
<header><h3>subline</h3></header>
<item>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</item>
<footer>footer</footer>
</div>
</div>
</article>
</div>
</body>
</html>
...please post a simpler solution that can be applied directly to my original question/code (not a simplified one) and I'll mark your answer as correct. Until then I think this is the best answer.
Pine Code answered the logo/header/image issue:
Replace:
.site-wrap img {
max-width: 100vw;
...
}
...with:
.site-wrap img {
max-width: 100%;
...
}
Thanks Pine code.
EDIT 1: Here is the code I actually ended up using for the footer, which was the difficult part. I ended up using the w3schools.com example mentioned above with some modifications, namely changing nowrap to wrap:
HTML:
<!-- start =============================================================== footer ============================================= end -->
<footer>
<div class="navLeftFooter nav-globe" id="navFooter">
<a href="#top" id="navBackToTop">
<div class="navFooterBackToTop">
<span class="navFooterBackToTopText">Go Back to Top of Page</span>
</div>
</a>
<div class="navFooterLine navFooterLinkLine navFooterPadItemLine">
<div class="navFooterLine navFooterLogoLine">
<figure id="FigLogoTiny">
<img src="/images/CII%20-%20favicon%20for%20website%20-%202020-09-17%200435.png" />
</figure>
</div>
<div class="navFooterLine"></div>
</div>
<!-- ========================================================================== footer lists - begin =================================================================== -->
<div class="flex-container">
<div>
<p class="navFooterColHead">Get Involved with CII's Platform</p>
<ul>
<li class="nav_first">
The Movement
</li>
<li>
c11
</li>
<li>
CII
</li>
<li>
Report Something
</li>
<li>
Pay Something Forward
</li>
<li>
Report a "Do-gooder"
</li>
<li>
Report a High Humanitarian Value Output Organization
</li>
<li>
Report a High Humanitarian Value Output Business
</li>
<li>
Report a High Humanitarian Value Output nonprofit
</li>
<li>
Report a High Humanitarian Value Output Government/Country
</li>
<li class="nav_last">
Help
</li>
</ul>
</div>
<div>
<p class="navFooterColHead">Get to Know Us</p>
<ul>
<li class="nav_first">
Become an Affiliate
</li>
<li>
Become a Strategic Partner
</li>
<li>
Offer Your Product or Service/"Advertise"
</li>
<li>
Submit an Ideology for Consideration
</li>
<li>
Submit an Idea for Consideration
</li>
<li>
Submit a Core Value for Consideration
</li>
<li>
Submit a Concept for Consideration
</li>
<li>
Submit a Core Change for Consideration
</li>
<li>
Submit Anything Else
</li>
<li>
Tactical Strategy
</li>
</ul>
</div>
<div>
<p class="navFooterColHead">Help Others</p>
<ul>
<li class="nav_first">
Careers & Volunteering
</li>
<li>
Blog
</li>
<li>
About CII
</li>
<li>
Sustainability
</li>
<li>
News & Press Center
</li>
<li>
Donor Relations
</li>
</ul>
</div>
<!-- <div>4</div> -->
<!-- <div>5</div> -->
<!-- <div>6</div> -->
<!-- <div>7</div> -->
<!-- <div>8</div> -->
</div>
<div class="nav-footer-line"></div>
<p style="text-align: center; color: white; background-color: black;">© 2020, Confluence Infinite International NPO or its
affiliates</p>
</div>
</footer>
CSS:
(My css is so overly complex right now I hit the SO character limit, so I only included the most critical part. For full css chat me or go to: confluenceinfinite.org and do an right-click > inspect.)
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: Gray;
}
.flex-container > div {
background-color: #f1f1f1;
width: 427px;
margin: 11px;
text-align: center;
line-height: 1.75rem;
font-size: 1rem;
overflow-wrap: break-word;
word-wrap: break-word;
/* float: left; */
}
.flex-container > ul {
list-style-type: none;
}
.flex-container > div > a:hover {
text-decoration: underline;
}
I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.
#media (max-width: 768px) {
.sideBar {
display: none !important;
}
}
What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.
How would I go about this in code-wise?
If there are any previous tutorials like this, please attach.
Original Code attached:
/* Copyright (c) myEd (made by students, for students.) 2018. */
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100000;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
position: relative;
}
#newsmyEd {
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
height: calc(100vh - 120px);
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
#media (max-width: 768px) {
.sideBar {
display: none !important;
}
}
<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>
<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<i class="fa fa-home"></i> <!-- Home -->
<i class="fa fa-book"></i> <!-- Learning -->
<i class="fa fa-user"></i> <!-- Student Management -->
<i class="fa fa-globe"></i> <!-- Portals -->
<i class="fas fa-sign-out-alt"></i> <!-- Log-out (right to left) -->
<i class="fa fa-question-circle"></i> <!-- Help (right to left) -->
<i class="fa fa-bookmark"></i> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
X
<h3>Quick Links</h3>
<h6>SEQTA Learn</h6>
<h6>SEQTA Engage</h6>
<h6>Adventist Schools Australia</h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<i class="fas fa-caret-down"></i> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
X
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter#kas.nsw.edu.au">tom.carpenter#kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<i class="far fa-newspaper"></i> <!-- myEd News -->
<i class="fa fa-location-arrow"></i> <!-- Site Navigation -->
</div>
</div>
</body>
</html>
Thanks, Tom
I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.
Here is the codepen
$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});
.mobile-menu-icon i.close {
display: none;
}
#media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
#media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>
I am trying to edit the margin on the nav bar links, however when I change the margin, nothing happens. Does anyone know why this is happening?
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
max-width: 100%;
height: 100vh;
margin: 0px 0px 0px 0px;
color: #C2D3CD;
}
.topbar, nav {
background-color: #847E89;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
padding-right: 2%;
padding-left: 2%;
background-color: #C2D3CD;
color: #847E89;
height: 10vh;
cursor: pointer;
}
.donate-name {
padding-top: 4vh;
background-color: #C2D3CD;
border: none;
cursor: pointer;
}
#temp-logo {
padding-top: 0vh;
margin-left: 2%;
font-size: 22px;
}
.topbar {
display: block;
border-bottom: solid 1px #C2D3CD;
height: 10vh;
}
/* Nav Bar */
nav {
text-align: center;
height: 7vh;
}
.link, link:visited {
color: #C2D3CD;
text-decoration: none;
}
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
}
/* First Page */
#home-screen {
background-image: url(Images/beach-background-1-NEW.jpg);
height: 80vh;
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
.text {
padding-top: 30vh;
}
/* Gallery */
.img {
width: 20vw;
height: 20vw;
}
.desc {
display: inline-block;
position: relative;
margin: 1%;
}
.desc:hover img {
filter: blur(1.5px) brightness(60%);
transition: 0.3s;
box-shadow: 0 0 10px gray;
}
.desc :not(img) {
position: absolute;
top: 37%;
z-index: 1;
text-align: center;
width: 100%;
color: #FFF;
opacity: 0;
transition: 0.3s;
}
.desc:hover :not(img) {
opacity: 1;
}
.img:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Conejo Teen Organization</title>
</head>
<body>
<!-- Top Bar -->
<div class="topbar">
<!-- Get logo ASAP -->
<p id="temp-logo"><em>Conejo Teen Organization</em></p>
<a id="donate-top" class="donate" href="#"><button class="donate-name">Donate</button></a>
</div>
<!-- Nav -->
<nav>
<a id="mission-link" class="link" href="#">Mission</a>
<a id="about-link" class="link" href="#">About Us</a>
<a id="donations-link" class="link" href="#">What We Do</a>
<a id="contact-link" class="link" href="#">Contact</a>
</nav>
<!-- Main -->
<main>
<!-- First Section -->
<section id="home-screen">
<article class="text">
<h1 id="h1">Conejo Teen Organization</h1>
<p id="h1-desc">Helping California teens in need since 2017</p>
<button id="donate-home" class="donate">Donate Now!</button>
</article>
</section>
<!-- Our Mission -->
<section id="mission">
<h2 id="mission-h2">Our Mission</h2>
<p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
</section>
<!-- Image Gallery (images of projects) -->
<section id="gallery">
<h2 id="images">Gallery</h2>
<!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
<div class="row1 row">
<!-- Image 1 -->
<div class="desc-1 desc">
<img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 2 -->
<div class="desc desc-2">
<img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 3 -->
<div class="desc desc-1">
<img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
<h3 id="img-desc">Dec My Room</h3>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p id="copyright">© 2018 Conejo Teen Organization</p>
<p id="my-credit">Created by Jacob Pieczynski</p>
</footer>
</body>
</html>
You're trying to apply margin-top to inline elements which you can't do since it would disrupt the flow of the page:
#mission-link, #about-link, #donations-link, #contact-link {
display: inline-block; /* Try making them inline block */
margin-top: 5%;
}
Try making the links inline-block.
Add display: inline-block like:
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
display: inline-block;
}
I have checked your code remove: height: 10vh; from topbar class