Due to the html markup I had to use flex-basis to improve style, so that p element start from the same column as the title/headline, and problem was fixed using flex-basis.
But as you can see in the screenshot, the image takes too much height and width.
I tried to fix it applying max-height and max-width, but it breaks my style.
And my goal is to remove that space so that i can control the space between the content and button.
Note: I can't use css grid. I know, it would be easier, but there are problems on ios using css grid.
Here is the sandbox link and code snippet below
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.logo-image {
flex-basis: 100%;
object-fit: contain;
object-position: top;
padding-top: 10px;
order: 1;
align-self: flex-start;
}
.headline {
color: white;
order: 2;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
]3 and code
First, remove flex-basis on .logo-image.
Then put h4.headline and your img in its own .wrapper and add display: flex; to it. Then just set img { max-width: 100%;) so that your image resizes appropriately in the container.
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
display: flex;
}
.logo-image {
object-fit: contain;
object-position: top;
padding-top: 10px;
align-self: flex-start;
}
.headline {
color: white;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
padding-left: 10px;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<div class="content">
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<div class="wrapper">
<h4 class="headline">
Block Title
</h4>
<div>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente aliquid sit, cupiditate
</p>
</div>
</div>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
</body>
</html>
Can't you make the image position:absolute so you wont need flex-box
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
position: relative;
padding-left: 4rem;
}
.logo-image {
position: absolute;
left: 0;
top: 0;
}
.headline {
color: white;
order: 2;
margin:0 0 0.5rem;
}
.text {
color: white;
font-size: 16px;
margin:0 0 10px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
</body>
</html>
I have an <ul> list which is in the first cell in my 4 col grid but I have an issue with my icon which is getting smaller than the other ones. I know why it happens but I don't know how to solve that.
In the first <li> I have an icon and a <span> element with a text inside of it.
The thing is that my text is larger than the grid cell, and the lines of it are stacking upon one of each other which is ok but with every stacked line my icon gets smaller and smaller in width.
Instead of having a width=24px it has like 10px. The height is still ok. Here is a photo of how it looks:
Here is some of my HTML code:
.footer-logo {
margin-bottom: 3.6rem;
}
.huddle-footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1.5fr;
background-color: var(--Very-Dark-Cyan);
align-items: center;
justify-items: center;
padding: 12.8rem 9.6rem 6.4rem 9.6rem;
margin-top: 12.8rem;
}
.about-us:nth-child(2) {
justify-self: end;
}
.location,
.phone-number,
.email-address,
.detail,
.copyright {
color: var(--very-pale-cyan);
font-size: 1.2rem;
}
.detail:link,
.detail:visited {
text-decoration: none;
}
.detail-hover:hover,
.detail-hover:active {
text-decoration: underline;
}
.copyright {
font-size: 1.2rem;
}
.copyright-and-icons {
display: flex;
flex-direction: column;
justify-self: center;
}
.social-icon {
width: 1.2rem;
height: 1.2rem;
fill: hsl(193, 100%, 96%);
border: 1px solid hsl(193, 100%, 96%);
border-radius: 50%;
padding: 0.4rem;
transition: all ease-out 0.3s;
}
.address-icon {
width: 2.4rem;
height: 2.4rem;
fill: hsl(193, 100%, 96%);
}
ul {
list-style-type: none;
}
.info {
display: flex;
gap: 1.6rem;
}
.mg-left {
margin-left: 1.6rem;
}
.footer-social-icons {
display: flex;
gap: 1.4rem;
}
.social-icon:hover,
.social-icon:active {
fill: hsl(322, 100%, 66%);
border: 1px solid hsl(322, 100%, 66%);
}
<footer class="huddle-footer">
<div class="contacting-details">
<img class="footer-logo" src="images/logo.svg" alt="huddle logo" />
<ul class="detail flex-gap">
<li class="info">
<ion-icon class="address-icon grow" name="location-outline"></ion-icon>
<span class="location">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</span>
</li>
<li class="info">
<ion-icon class="address-icon" name="call-outline"></ion-icon>
<span class="phone-number"> +1-543-123-4567 </span>
</li>
<li class="info">
<ion-icon class="address-icon" name="mail-outline"></ion-icon>
<span class="email-address">example#huddle.com</span>
</li>
</ul>
</div>
</footer>
I looked at you code, after some playing around the solution was just to wrap your <ion-icon> in a div, like this:
<div><ion-icon class="address-icon grow" name="location-outline"></ion-icon></div>
I'm developing an angular app with fixed top title, left nav menu and right content. I'm trying to create a layout by using flex, with no success. This is the starting HTML:
.layout-container__header {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
color: white;
background: #3f51b5;
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.20), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
}
.layout-container__content__navmenu {
flex: 1;
}
.layout-container__content__navmenu-header .k-icon {
margin-top: 0.8rem;
font-size: 2rem;
margin-left: 0.7rem;
}
#navbar-toggler:hover {
background-color: #3848a3;
}
.navbar-toggler span {
align-content: center;
font-size: 1.2rem;
color: var(--palette-color-primary-100);
}
.navbar-toggler span:hover {
color: white;
}
.header-brand {
color: white;
}
.header-brand span {
padding-top: 0.1rem;
font-size: 1.6rem;
}
.layout-container__content {
// margin-top: 4rem;
}
.layout-container__content__body {
flex: 1;
overflow: auto;
}
<div class="layout-container d-flex flex-column h-100 w-100">
<div class="layout-container__header d-flex align-self-stretch">
<div>
<button id="navbar-toggler" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="k-icon k-i-menu"></span>
</button>
</div>
<div class="header-brand">
<span>GeneXsys</span>
</div>
</div>
<div class="layout-container__content d-flex flex-grow-1">
<div class="layout-container__content__main d-flex flex-row justify-content-center align-self-stretch">
<div class="layout-container__content__navmenu">
<div class="layout-container__content__navmenu-header">
<div class="d-flex">
<!-- <span class="k-icon k-i-file-config"></span> -->
</div>
</div>
<div class="layout-container__content__navmenu-body">
<p>Menu Option 1</p>
<p>Menu Option 2</p>
<p>Menu Option 3</p>
</div>
</div>
<div class="layout-container__content__body h-100 d-flex flex-column flex-grow-1">
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
</div>
</div>
</div>
</div>
I'm trying to set different flex configurations with row/column directions but no success. This is the intented layout taking into account that left panel (side nav menu) should be collapsible and items displayed could overflow the div causing the vertical scrollbars be displayed:
Thanks for any help
Here is a mockup, that matches yours. I used your class names(with a little adjustments).
Take note of the .collapse class, toggle it on/off onto the .__sidebar element using javascript
var toggler = document.querySelector("#collapse-sidebar");
var sidebar = document.querySelector(".layout__container__content__sidebar");
toggler.addEventListener("click", function(){
sidebar.classList.toggle("collapse")
});
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.layout__container {
position: relative;
width: 100%;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.layout__container__header {
position: relative;
width: 100%;
height: 70px;
background: #3f51b5;
}
.layout__container__content {
position: relative;
width: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.layout__container__content__sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background: skyblue;
z-index: 1;
overflow-y: auto;
}
.layout__container__content__sidebar.collapse {
left: -200px;
}
.layout__container__content__body {
position: relative;
width: 100%;
height: 100%;
background: peachpuff;
}
<div class="layout__container">
<div class="layout__container__header">
<button id="collapse-sidebar">Collapse Sidebar</button>
</div>
<div class="layout__container__content">
<div class="layout__container__content__sidebar">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
</ul>
</div>
<div class="layout__container__content__body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, quia dolorem iure error perferendis, qui rem quae aliquid nostrum odio reiciendis magni, nam maxime fugiat inventore. Natus perspiciatis quo veritatis.
</div>
</div>
</div>
https://codepen.io/oshimi/pen/jOBPQGr
The Navbar problem
I had to change the header's background color so the logo and the nav-links would have the same background. But, this cause a problem when I define a:hover. The background color(bordor) of hover style looks small, doesn't change the color of top and bottom navbar.
Another problem is navbar doesn't start from the top even tho I define margin 0. This also causes the email subscription section not seen.
align-items: center doesn't work.
I can't make the writings in the section with the id features placed at the center of the page. Text-align is working but that's not I am looking for. I want the paragraphs placed at the center just the way they are.
I also can't make this for the columns with borders.
<body>
<!--NAVBAR -->
<header>
<div class="logo">
<img
id="header-img"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="original trombones logo"
/>
</div>
<nav id="navbar">
<ul>
<li><a class="navlink">Home</a></li>
<li><a class="navlink">Details</a></li>
<li><a class="navlink">About</a></li>
</ul>
</nav>
</header>
<div class="container-intro">
<input type="email" required size="30" placeholder="Enter your email" class="input" id="email">
<button type="Submit" class="submit" id:"submit">Submit</button>
</div>
<div class="container">
<section id="features">
<div class="desc">
<h2>Premium Materials</h2>
<p>
Our trombones use the shiniest brass which is sourced locally. This
will increase the longevity of your purchase.
</p>
</div>
<div class="desc">
<h2>Fast Shipping</h2>
<p>
We make sure you recieve your trombone as soon as we have finished
making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="desc">
<h2>Quality Assurance</h2>
<p>
For every purchase you make, we will ensure there are no damages or
faults and we will check and test the pitch of your instrument.
</p>
</div>
</section>
</div>
<div class="detail"><!--3 columns at the center of page -->
<section class="prices">
<div class="easy">
<h2>Easy</h2>
<ol>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
</div>
<div class="mid">
<h2>Medium</h2>
<ol>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
</div>
<div class="hard">
<h2>Hard</h2>
<ol>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
</div>
</section>
</div>
<section class="video-section">
<div class="video-div">
<!--For the video h1 going to be on the left of the page and gonna be big and the video on the right -->
<h1>The Video >>></h1>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/5-9fAFjpncY?start=12" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<footer>
<span>Copyright .....................</span>
</footer>
#import url('https://fonts.googleapis.com/css2?family=Exo&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Exo', sans-serif;
}
li{
list-style-type: none;
}
.container {
width: 80%;
margin: 0 auto;
display:flex;
align-items: center;
background: orange;
height: 500px;
}'
header{
padding: 1.5rem 3rem;
display: flex;
align-items: center;
justify-content: space-between;
background: orange;
position: fixed;
width: 100%;
}
#header-img{
width: 15rem;
margin-left: -1rem;
}
nav#navbar, header{
}
nav#navbar ul{
display: flex;
}
nav#navbar ul li{
margin-left: 3rem;
}
nav#navbar ul li a{
font-size: 30px;
font-weight: bold;
color: white;
}
#navbar a:hover{
background: white;
border:2px solid;
color: black;
}
#media screen and (max-width: 650px){
header{
flex-direction: column;
}
nav#navbar ul{
display: block;
text-align: center;
}
#header-img{
margin: 1rem 0;
text-align: center;
}
}
container-intro{
text-align: center;
margin-top: 20rem;
}
.input {
padding: 0.5rem;
display: block;
margin: 0.9rem auto;
width: 300px;
}
.submit{
width: 200px;
padding: 0.5rem;
display: block;
margin: 0.9rem auto;
font-size:1.5rem;
border: none;
text-transform: uppercase;
font-weight: bold;
background: orange;
}
#features{
display: column;
margin-top: 4rem;
justify-content: center;
align-items: center;
}
.desc{
margin-top: 2rem;
justify-content: center;
align-items: center;
}
.prices {
display: flex;
justify-content: space-between;
width: 33.33%;
}
.detail{
align-items: center;
justify-content: center;
}
.easy,.mid,.hard{
border: 1px solid black;
}
.video-div{
display:flex;
justify-content: space-between;
}
.video-div h1{
align-items: center;
justify-content: center; none of this working.
text-align: center;
}
1. Navbar
When placing the navbar with position: fixed; set the top location to top: 0; to prevent the space at the top. The email form wasn't set lower on the page because of a typo with the class name (the period was missing):
.container-intro{
text-align: center;
margin-top: 20rem;
}
The a elements display inline by default, so if you want them to have height (for the hover to cover the top and bottom of the navbar color, as well) you can choose display: flex (for example) and switch the top and bottom padding (or margin) to the logo instead of having it it the navbar itself. I believe this is what you are trying to achieve for the navlinks. See my snippet for the code changes.
2. Centering
The container class should have justify-content: center; to center the desc classes. For the columns with borders, you have flex display on the prices but need to have a display value for their parent element (detail class).
Please review the code snippet and compare it to your codepen. I tried to provide enough comments in the code.
There are some helpful tips to working with flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
#import url('https://fonts.googleapis.com/css2?family=Exo&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Exo', sans-serif;
}
li {
list-style-type: none;
}
.logo {
padding: 1.5rem 0;
}
/* Added justify-content: center to center the features id: */
.container {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
background: orange;
height: 500px;
}
/* Top and bottom padding prevented navlinks from reaching full-height, moved it to the logo */
/* With the fixed position, set the top to zero: */
header {
padding: 0 3rem;
display: flex;
align-items: stretch;
justify-content: space-between;
background: orange;
position: fixed;
top: 0;
width: 100%;
}
#header-img {
width: 15rem;
margin-left: -1rem;
}
nav#navbar,
header {}
/* a elements display inline by default, so I changed it to flex and added height: */
.navlink {
display: flex;
align-items: center;
height: 100%;
margin: 0;
}
nav#navbar ul {
display: flex;
height: 100%;
}
nav#navbar ul li {
margin-left: 3rem;
height: 100%;
}
nav#navbar ul li a {
font-size: 30px;
font-weight: bold;
color: white;
border: 2px solid transparent;
}
#navbar a:hover {
background: white;
border: 2px solid;
color: black;
}
#media screen and (max-width: 650px) {
header {
flex-direction: column;
}
nav#navbar ul {
display: block;
text-align: center;
}
#header-img {
margin: 1rem 0;
text-align: center;
}
}
/* This was missing the period before the class name: */
.container-intro {
text-align: center;
margin-top: 20rem;
}
.input {
padding: 0.5rem;
display: block;
margin: 0.9rem auto;
width: 300px;
}
.submit {
width: 200px;
padding: 0.5rem;
display: block;
margin: 0.9rem auto;
font-size: 1.5rem;
border: none;
text-transform: uppercase;
font-weight: bold;
background: orange;
}
#features {
display: column;
margin-top: 4rem;
justify-content: center;
align-items: center;
}
.desc {
margin-top: 2rem;
justify-content: center;
align-items: center;
}
.prices {
display: flex;
justify-content: space-between;
width: 33.33%;
}
/* Put the flex display on the detail class to make the prices classes centered: */
.detail {
display: flex;
align-items: center;
justify-content: center;
}
.easy,
.mid,
.hard {
border: 1px solid black;
}
.video-div {
display: flex;
justify-content: space-between;
}
.video-div h1 {
align-items: center;
justify-content: center;
none of this working. text-align: center;
}
<body>
<!--NAVBAR -->
<header>
<div class="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" />
</div>
<nav id="navbar">
<ul>
<li><a class="navlink">Home</a></li>
<li><a class="navlink">Details</a></li>
<li><a class="navlink">About</a></li>
</ul>
</nav>
</header>
<div class="container-intro">
<input type="email" required size="30" placeholder="Enter your email" class="input" id="email">
<button type="Submit" class="submit" id: "submit">Submit</button>
</div>
<div class="container">
<section id="features">
<div class="desc">
<h2>Premium Materials</h2>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="desc">
<h2>Fast Shipping</h2>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="desc">
<h2>Quality Assurance</h2>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</section>
</div>
<div class="detail">
<!--3 columns at the center of page -->
<section class="prices">
<div class="easy">
<h2>Easy</h2>
<ol>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
</div>
<div class="mid">
<h2>Medium</h2>
<ol>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
</div>
<div class="hard">
<h2>Hard</h2>
<ol>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
</div>
</section>
</div>
<section class="video-section">
<div class="video-div">
<!--For the video h1 going to be on the left of the page and gonna be big and the video on the right -->
<h1>The Video >>></h1>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/5-9fAFjpncY?start=12" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<footer>
<span>Copyright .....................</span>
</footer>
</body>
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;
}