Develop Reference

how to move button on bottom using css?

I am trying to move my button on bottom (some pixel above bottom).so it always be in bottom whether it contend is less or large. I tried using flex-box also not able to do that.Container have min-height : 500px
here is my code
https://jsbin.com/joyalosate/edit?html,css,output
Expected output :: Explore products move bottom with some pixel above bottom .
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
HTML
<div class="rh02w2">
<div class="bottom__block">
<button class="rh02-pcontent" data-lbl="panel2-home-apps-content-area">
<h1 class="rh02-ttl">Tetst <b>Applications</b></h1>
<div class="rh02-sub">Complete Suite of Apps</div>
<div class="rh02-leadin">
<p>Streamline your enterprise business process. With ERP Financials, Procurement, Project Portfolio Management and more, you can increase productivity, lower costs, and improve controls.</p>
</div>
</button>
<div class="rh02w4">
<div class="rh02-cta">
<div class="obttns">
<div>
<a data-lbl="panel2-home-apps-learn-more">Explore products</a>
</div>
</div>
</div>
</div>
</div>
</div>
css
.rh02w2 {
background-color: #325C72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #FBF9F8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
.obttns {
width: 100%;
font-size: 1.4rem;
margin-bottom: -1.6rem;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: stretch;
align-items: stretch;
}
.obttns>div>* {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
}

Replace your CSS with this.
.rh02w2 {
background-color: #325c72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #fbf9f8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height: 500px;
}
.rh02w4 {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.obttns {
width: 100%;
font-size: 1.4rem;
}
.obttns > div > * {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}

If you want to display your button about 10% above the bottom of the screen you can use the margin-top: 90%; in css. Here is the entire code alongside a button:
<button style="margin-top: 90%;">hi</button>
You can edit the 90% depending on how far down the button is on your screen. Since the code is also using the percentage instead of pixels, it will adjust depending on your screen size.

Reactjs add/delete input fields with scrollable container

I am a new reactJS developer and am looking to create a container that holds an input field where you can add/delete new fields. I want all of this to be in a scrollable container but instead, my code adds new inputs but moves the rest of the page and doesn't stay in the container. Below is the react and css. The css also has some fields I am going to include later
React
import React, { useState } from "react";
import './Dropdown.css'
function Dropdown() {
const [inputList, setInputList] = useState([{ courseName: "", courseRating: "" }]);
// handle input change
const handleInputChange = (e, index) => {
const { name, value } = e.target;
const list = [...inputList];
list[index][name] = value;
setInputList(list);
};
// handle click event of the Remove button
const handleRemoveClick = index => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
// handle click event of the Add button
const handleAddClick = () => {
setInputList([...inputList, { courseName: "", courseRating: "" }]);
};
return (
<div className="base-container-drop">
<div className="content-drop">
{inputList.map((x, i) => {
return (
<div className="container-for-drop">
<div className="form-drop">
<div className="form-group-drop">
<label className="label-drop" htmlFor="courseName"></label>
<input className="input-drop"
name="courseName"
placeholder="Course Name"
value={x.firstName}
onChange={e => handleInputChange(e, i)}
/>
</div>
<div className="form-group-drop-rating">
<label className="label-drop" htmlFor="courseRating"></label>
<input className="input-drop"
type="number"
name="courseRating"
placeholder="0"
max='10'
min='0'
value={x.lastName}
onChange={e => handleInputChange(e, i)}
/>
</div>
<div className="btn-box">
{inputList.length !== 1 && <button
onClick={() => handleRemoveClick(i)}
className="Remove">
Remove
</button>}
<div className="sep"/>
{inputList.length - 1 === i && <button onClick={handleAddClick}
className="Add">
Add
</button>}
</div>
</div>
</div>
);
})}
</div>
</div>
);
}
export default Dropdown;
CSS
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.base-container-drop{
width:100%;
overflow-y:auto;
position:relative;
max-height: 30%;
}
.form-drop{
position: relative;
display: flex;
flex-direction: row;
margin-top: .5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: .7%;
overflow-y: auto;
}
.form-group-drop{
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: -25%;
justify-content: center;
align-items: center;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop{
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.form-group-drop-rating .input-drop{
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.input-drop :focus{
outline: none;
box-shadow: 0px 6px 12px .8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: row;
margin: auto;
}
.Add{
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 8px 10px;
padding-left: 8px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover{
background-color: #fff;
color: #6568F4;
}
.Remove:hover{
background-color: #fff;
color: #6568F4;
}
#media screen and (max-width: 960px) {
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.form-drop{
position: relative;
display: flex;
flex-direction: row;
margin-top: .5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: .7%;
overflow-y: auto;
}
.form-group-drop{
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 60%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 50%;
margin: -25%;
justify-content: center;
align-items: center;
padding-left: 13%;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop{
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75%;
}
.form-group-drop-rating .input-drop{
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75% ;
}
.input-drop :focus{
outline: none;
box-shadow: 0px 6px 12px .8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: column;
padding-left: 15%;
margin: auto;
justify-content: center;
align-items: center;
}
.btn-box .sep {
margin-top: 5%;
}
.Add{
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 7px 10px;
padding-left: 5px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover{
background-color: #fff;
color: #6568F4;
}
.Remove:hover{
background-color: #fff;
color: #6568F4;
}
}

I extended off you a bit and created a ScrollableContainer. The idea is to make it modular and reusable so you can put anything into it, your Dropdown or anything else. By default the height is 20% but you can set height='yourNumber' to set your own limit.
I also removed the 30% off your container on the dropdown for this to be effective.
Here is the updated:
JS
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function Dropdown() {
const [inputList, setInputList] = useState([
{ courseName: "", courseRating: "" }
]);
// handle input change
const handleInputChange = (e, index) => {
const { name, value } = e.target;
const list = [...inputList];
list[index][name] = value;
setInputList(list);
};
// handle click event of the Remove button
const handleRemoveClick = (index) => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
// handle click event of the Add busutton
const handleAddClick = () => {
setInputList([...inputList, { courseName: "", courseRating: "" }]);
};
return (
<div className="base-container-drop">
<div className="content-drop">
{inputList.map((x, i) => {
return (
<div className="container-for-drop">
<div className="form-drop">
<div className="form-group-drop">
<label className="label-drop" htmlFor="courseName"></label>
<input
className="input-drop"
name="courseName"
placeholder="Course Name"
value={x.firstName}
onChange={(e) => handleInputChange(e, i)}
/>
</div>
<div className="form-group-drop-rating">
<label className="label-drop" htmlFor="courseRating"></label>
<input
className="input-drop"
type="number"
name="courseRating"
placeholder="0"
max="10"
min="0"
value={x.lastName}
onChange={(e) => handleInputChange(e, i)}
/>
</div>
<div className="btn-box">
{inputList.length !== 1 && (
<button
onClick={() => handleRemoveClick(i)}
className="Remove"
>
Remove
</button>
)}
<div className="sep" />
{inputList.length - 1 === i && (
<button onClick={handleAddClick} className="Add">
Add
</button>
)}
</div>
</div>
</div>
);
})}
</div>
</div>
);
}
function ScrollableContainer(props) {
const height = props.height || "20%";
return (
<div
className="scrollable-container"
style={{
height
}}
>
{props.children}
</div>
);
}
function App(props) {
return (
<ScrollableContainer height="200px">
<Dropdown />
</ScrollableContainer>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
CSS
.scrollable-container {
overflow: auto;
}
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.base-container-drop {
width: 100%;
overflow-y: auto;
position: relative;
/* max-height: 30%; */
}
.form-drop {
position: relative;
display: flex;
flex-direction: row;
margin-top: 0.5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: 0.7%;
overflow-y: auto;
}
.form-group-drop {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: -25%;
justify-content: center;
align-items: center;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop {
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.form-group-drop-rating .input-drop {
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.input-drop :focus {
outline: none;
box-shadow: 0px 6px 12px 0.8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: row;
margin: auto;
}
.Add {
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 8px 10px;
padding-left: 8px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover {
background-color: #fff;
color: #6568f4;
}
.Remove:hover {
background-color: #fff;
color: #6568f4;
}
#media screen and (max-width: 960px) {
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.form-drop {
position: relative;
display: flex;
flex-direction: row;
margin-top: 0.5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: 0.7%;
overflow-y: auto;
}
.form-group-drop {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 60%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 50%;
margin: -25%;
justify-content: center;
align-items: center;
padding-left: 13%;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop {
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75%;
}
.form-group-drop-rating .input-drop {
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75%;
}
.input-drop :focus {
outline: none;
box-shadow: 0px 6px 12px 0.8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: column;
padding-left: 15%;
margin: auto;
justify-content: center;
align-items: center;
}
.btn-box .sep {
margin-top: 5%;
}
.Add {
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 7px 10px;
padding-left: 5px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover {
background-color: #fff;
color: #6568f4;
}
.Remove:hover {
background-color: #fff;
color: #6568f4;
}
}
Updated code sandbox for preview. Just a note I set a height to 200px on ScrollableContainer, for sake of demo. But you can remove it and it will become 20% as the default: https://codesandbox.io/s/react-hooks-usestate-forked-h1iqr

CSS flexgrid styling

I am just trying to get the grid row to look the way I want and I have a large CSS and can't seem to get the column with three rows of the text right. There's the photo to indicate where the obvious entry should read from.
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,
code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body {
background-image: url(https://i.imgur.com/sCfeeeY.png) ;
background-position: top 1em right 1em, bottom 1em left 1em;
background-repeat: no-repeat;
}
.row {
flex: 2 auto;
grid-column: 1 30em;
display: flex;
margin: auto;
}
.active {
margin: 1em;
}
.fullwebpage .section {
display: grid;
grid-gap: .4rem;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
/* grid-template-columns: repeat(auto-fit, minmax(40em, ifr)); */
grid-column: 1;
flex: 0 1 28em;
}
.box {
display: flex;
align-items:center;
grid-column: 4;
flex: 3 auto;
width: 100%;
padding-top:1.5em;
padding-left: 2em;
}
.sectionheader {
display: flex;
flex: 8 auto;
grid-row: auto 1;
width: 100%;
margin: 1em;
/* padding-left: 3em; */
margin-right: 3em;
}
.sectionfirst {
margin-left: 5em;
/*margin-right:2em;
height:39em; */
padding-top: 1em;
}
.head_bg {
padding-top:1.5em;
padding-left: 2em;
}
.section_bg .head_bg a:active {
color: black;
}
.header {
padding-left: 2em;
padding-right:3em;
}
.logo {
margin-left: 3em;
margin-right: 2em;
}
.links {
padding-bottom:1em;
}
.links li a {
color: white;
}
.footer a:active {
color: white;
}
.promo_slogan_mid {
font-weight: bold;
font-size: 40px;
align-items: start;
text-align: start;
}
.promo_slogan_mid p {
font-size: 1vw;
font-weight: normal;
}
.promo_slogan {
font-weight: bold;
font-size: 3vw;
align-items: center;
word-wrap: break-word;
}
.promo_slogan p {
font-size: 1vw;
font-weight: normal;
}
.nav_menu {
float: left;
/* margin-left: 0em;*/
margin-right: 1.5em;
justify-content: space-around;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
display: flex;
z-index: 1;
}
.nav_menu a {
margin: .3em 1.3em;
}
.updateinput#gsbutton {
float: right;
text-decoration: none;
/* display: inline-block; */
z-index: 1;
}
.gsbutton:hover .gsbutton:active {
border: none;
outline: none;
}
.wrap {
display: inline-flex;
width:100%;
margin-top:1em;
}
.wrap a {
display: flex;
flex: 3 auto;
flex-flow: row;
grid-row: 1;
float: start;
color: black;
text-decoration: none;
font-size: 17px;
}
.footerbanner {
display: flex;
justify-content: space-between;
}
.container1 {
width: 100%;
display: flex;
}
.col-xs {
width:20%;
}
.sectionsecond {
padding-top: 2em;
display: grid;
grid-template-columns: 3;
align-items: center;
text-align: center;
width: 100%;
padding-top: 1em;
/* display: flex;
flex: 3 auto;
grid-row: auto 1;
width: 100%; */
margin: 1em;
height:39em;
margin-right: 3em;
}
.mycolumn_header .row_header {
margin-bottom: 2em;
display: block;
text-align: center;
}
.foot-row h1 {
display: flex;
/* height: 8em; */
padding-top: 2.1em;
padding-bottom: 0em;
margin: 1em 2em;
width: 100%;
z-index:1;
}
.updateinput#email_validate {
text-align: end;
padding-top: 2.1em;
margin: 1em 2em;
}
.updateinput {
font-weight: bold;
font-size: 20px;
padding-bottom: 0em;
}
.topfooterbanner div {
font-weight: bold;
font-size: 20px;
height: 12em;
}
.modal-content {
border-radius: 1rem
}
.modal-content:hover {
box-shadow: 2px 2px 2px black
}
.btn:hover a:active {
border: none;
}
.btn {
text-decoration: none;
}
.fa {
color: #2b84be;
font-size: 90px;
padding: 30px 0px
}
.form {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
background-image: linear-gradient(to bottom right, rgb(10, 153, 209), rgb(5, 76, 122));
text-align: center;
font-size: 16px;
}
.b1 {
background-color: #2b84be;
box-shadow: 0px 4px #337095;
font-size: 17px
}
.r3 {
color: #c1c1c1;
font-weight: 500
}
.topfooterbanner {
text-decoration: none;
width: 100%;
}
.row_header h1 {
/* vertical-align: bottom; */
font-size: 3em;
font-weight:bold;
/* padding-bottom: 0; */
}
.foot-row h1 {
/* vertical-align: bottom; */
font-size: 3em;
font-weight:bold;
/* padding-bottom: 0; */
}
.foot-row {
/* padding-top: 2.6em; */
text-align: end;
background-color: #F97419;
display: flex;
}
.foot-row::before {
position: absolute;
width: 100%;
}
.statementnews {
width: 300px;
height: 300px;
padding-top: 1em;
padding-left: 30px;
box-shadow: 0 0 10px;
border-radius: 10px;
margin: 10px;
overflow: hidden;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.statementnews p {
text-align: wrap;
margin-left: 1em;
margin-right: 1em;
background-color: #f0f0f0;
}
.statementnews:hover {
transform: rotate(360deg);
}
.col {
min-width:15vw;
min-height: 60vh;
}
.mycolumn2 {
display: flex;
flex: 4 auto;
grid-row: 1 2;
width: 100%;
padding-left: 4em;
margin: 1em;
}
.sectionthird#gsbutton_3 {
align-items: center;
}
.sectionthird {
padding-top: 8em;
display: flex;
/* grid-row: auto 3; */
}
.col-md-6#sidebar1 {
width:60%;
padding-top: 0em;
padding-left: 0em;
padding-right: 0em;
align-items: center;
}
.middle_id_img {
padding-left:1em;
}
.col-md-4 {
font-weight: bold;
font-size: 40px;
align-items: start;
text-align: start;
/* font-size: 1vw; */
/* font-weight: normal; */
}
.col-md-6 {
height: 8em;
width: 45%;
display: flex;
/* justify-content: space-between; */
margin-left: 2em;
/* padding-left: 5em; */
padding-top: 2em;
}
.table-row {
padding-top: 2em;
display: flex;
text-align: center;
}
.table-row#content {
height: 14em;
}
.mycolumn_header {
font-weight: bold;
font-size: 45px;
}
.sectionthird {
padding-top: 2em;
display: grid;
grid-template-columns: 3;
align-items: center;
text-align: center;
width: 100%;
}
.mycolumn#userresponse {
font-size: 8em;
font-weight: bold;
}
.mycolumn#content_gsbutton {
font-size: .4em;
align-items: center;
margin-bottom: 0;
}
.mycolumn {
height: 8em;
align-items:center;
text-align: start;
display: table-cell;
margin-left: 2em;
padding-left: 1em;
padding-top: 2em;
}
#sidebar {
height: 9em;
box-shadow: -.4em 1em #888888;
width:30%;
}
#align_bottom {
padding-top: 10em;
padding-left: 40em;
margin: 0;
font-size: 1vh;
font-family: Verdana;
font-weight: normal;
}
.footer_column ul {
padding-top: 1em;
display: block;
text-align: center;
}
.gsbutton_footer {
position: center;
}
.footer_column {
display: inline-block;
width: 100%;
color: white;
font-size: 1.7vh;
font-family: Verdana;
font-weight: bold;
padding-left: 19em;
margin: 0em 1em;
}
.sectiontopfooter {
margin-top: 15em;
}
.sectionfooter {
width: 100%;
display: flex;
background-color: black;
}
.sectionfooter li {
padding-top: 1em;
vertical-align: bottom;
}
.wrap-row#middle_id_img {
width: 20%;
}
.wrap-row {
padding-top: 2em;
display: flex;
text-align: center;
}
.wrap-row#sidebar_col {
display: grid;
grid-template-columns: 3;
padding-top: 8em;
}
.wrap-row#box-md-3 {
padding-top: 8em;
width: 100%;
display: flex;
}
<section class="sectionsecond">
<div class="wrap-row">
<div class="box" id="box-md-3">
<div class="col-md-6 " id="table-element1">
<div class="promo_slogan_mid" id="sidebar_col">
<h1> What’s different about Manage?</h1>
<br>
<p>Manage provides all the functionality your team needs, without the complexity. Our software is tailor-made for modern digital product teams.</p>
</div>
</div>
<div class="col-xs" id="middle_id_img">
<img src="https://i.imgur.com/99FIu0U.png" alt="">
</div>
<div class="col-md-6 col-md-4 promo_slogan" id="feedback_slogan">
<h2>Track company-wide progress</h2>
<p class="text_slogan">See how your day-to-day tasks fit into the wider vision. Go from
tracking progress at the milestone level all the way done to the
smallest of details. Never lose sight of the bigger picture again.</p>
<br>
<h2>Advanced built-in reports</h2>
<p class="text_slogan">Set internal delivery estimates and track progress toward company
goals. Our customizable dashboard helps you build out the reports
you need to keep key stakeholders informed.</p>
<br>
<h2> Everything you need in one place</h2>
<p class="text_slogan"> Stop jumping from one service to another to communicate, store files,
track tasks and share documents. Manage offers an all-in-one team
productivity solution.</p>
</div>
</div>
</div>
</section>
I'd really like to have the transition animation from CSS slide the row onload() but I can't seem to get that

Toggling nav icon in browser mobile screen size will make nav-list-items dissapear when readjusting browser screen to large size

Hello my current issue is that when the page initially loads the navigation works and appears properly when the browser is enlarged, however when readjusting the browser window to a smaller size, toggling the nav menu icon works but however will either
a) readjust the layout in the larger web browser screen if the mobile menu was left open
or
b) navigation items will entirely disappear if the mobile menu was closed
when readjusting the browser window back to the larger screen size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chispot_Blog</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/a23422f356.js" crossorigin="anonymous"></script>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
// Trying to figure out toggling visibility issue with navigation when going back to large screen
// let navi = document.getElementById("nav-list");
// navi.addEventListener(onresize, toggle_visibility){
// display = "block";
// };
</script>
</head>
<!-- Hamburger Icon from font awesome -->
<!-- <i class="fas fa-bars"></i> -->
<body>
<header>
<nav>
<a href="index.html"><img class="logo" src="images/Component 1.png" alt="blog spot logo">
<ul id="nav-list">
<li class="nav-list-item">home</li>
<li class="nav-list-item">cafes</li>
<li class="nav-list-item">views</li>
<li class="nav-list-item">posts</li>
</ul>
</nav>
<div class="hide">
<i class="fas fa-bars fa-lg hamburger ham-toggle"></i>
</div>
</header>
I have tried to put display:block property under the appropriate class selector inside the larger media query. Which didn't populate any nav-list-items, I kept the display:flex property because thats how I want the nav-list-items to be formatted in the larger layout.
/* general */
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
img{
width: 100%;
}
a:hover, a:focus{
color: black;
}
a .icon:hover{
color: yellow;
}
.logo{
width: 12em;
margin-top: .5em;
margin-bottom: .5em;
}
.main-image{
height: 80%;
width: 95%;
object-fit: cover;
border: 1em;
border-color: #111111;
border-style: solid;
}
.featured-img{
height: 90%;
width: 100%;
object-fit: cover;
order: 1;
padding: 1em;
background-color: lightgray;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
.secondary-featured-article-img{
height: 75%;
width: 90%;
object-fit: cover;
order: 1;
padding: .75em;
background-color: lightgray;
}
/* Typography */
h1{
font-size: 8rem;
text-align: center;
}
h3{
font-size: 3rem;
margin-bottom: 0;
}
h4{
font-size: 2rem;
font-weight: 700;
margin-bottom: 0;
margin-top: 0;
}
h5{
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0;
}
.site-intro-body{
font-size: 1.15rem;
font-weight: lighter;
justify-content: center;
align-items: center;
order: 2;
}
.secondary-featured-article-body{
font-size: .9rem;
font-weight: lighter;
}
footer{
background-color: black;
color: white;
}
.side-page-post-title{
margin-top: .5em;
margin-bottom: 0;
padding-top: .25em;
padding-bottom: .25em;
background-color: black;
color: white;
}
.side-page-post-body{
margin-left: 6em;
margin-right: 6em;
margin-top: 2em;
margin-bottom: 2em;
}
/* Layout Mobile Screen*/
header{
background-color: #f8f8f8;
width: 100%;
margin-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
z-index: 999;
}
header .hamburger{
margin-top: 1em;
margin-right: 1em;
align-content: flex-start;
/* visibility: hidden; HIDE WHEN IN MEDIA QUERY */
}
nav{
display: flex;
width: 100%;
flex-direction: column;
padding-left: 2em;
align-items: center;
justify-content: center;
}
#nav-list{
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: row;
list-style: none;
margin-bottom: 0;
display: none;
}
.nav-list-item{
margin: .1em;
font-size: 1.5rem;
font-weight: 700;
}
a{
text-decoration: none;
color: darkgray;
}
main{
display: flex;
flex-direction: column;
width: 100%;
}
.main-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 4em;
background-color: black;
color: white;
margin-top: 0;
padding-bottom: 3em;
padding-top: 4em;
}
.site-intro{
width: 90%;
padding: 0 5em;
}
.site-intro p{
column-count: 2;
}
.site-photo{
height: 100%;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
order: 1;
}
.article-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 5em;
margin-top: 0;
}
.featured-article{
width: 90%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
padding-right: 2em;
padding-top: 2.5em;
}
.featured-article-body{
width: 100%;
order: 2;
margin-top: 0;
text-align: center;
}
.secondary-featured-article-section{
width: 100%;
display: flex;
flex-direction: column;
}
.secondary-featured-article{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 2em;
padding-top: 2em;
margin-bottom: 0;
}
.secondary-featured-article-body{
width: 95%;
order: 2;
margin-top: 0;
text-align: center;
}
.secondary-featured-article-border{
border-bottom: .15em lightgray solid;
}
footer{
padding-top: 3em;
padding-bottom: 3em;
}
.footer-body{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1em;
}
.social-media-icons{
display: flex;
justify-content: center;
align-items: center;
}
.icon{
margin-right: .5em;
}
.hide{
height: 100%;
align-self: flex-start;
}
.side-page-post-body{
margin-top: 4em;
margin-bottom: 4em;
}
.article-listings{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.article-listing{
display: flex;
height: 45vh;
justify-content: space-around;
align-items: center;
margin-bottom: 2em;
background-color: whitesmoke;
padding-top: 2em;
padding-bottom: 2em;
}
.article-blog-description{
display: flex;
width: 50%;
height: 90%;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
order: 2;
}
.article-listing-image{
order: 1;
width: 40%;
height: 90%;
object-fit: cover;
align-items: center;
}
.article-listing-title{
font-size: 1.75em;
margin-bottom: .5em;
}
.article-listing-body{
margin-top: 0;
font-size: .9em;
}
/* Layout Large Screen*/
#media screen and (min-width: 760px){
.main-image{
height: 75vh;
width: 90%;
object-fit: cover;
border: 1em;
border-color: #111111;
border-style: solid;
}
.featured-img{
height: 70vh;
width: 45%;
object-fit: cover;
order: 1;
padding: 1em;
background-color: lightgray;
}
.secondary-featured-article-img{
height: 40vh;
width: 45%;
object-fit: cover;
order: 1;
padding: .75em;
background-color: lightgray;
}
header{
background-color: #f8f8f8;
width:100%;
margin-bottom:0;
display:flex;
justify-content:space-between;
align-items:center;
position: fixed;
}
header .hamburger{
margin-top: auto;
margin-bottom: auto;
margin-right: 1em;
visibility: hidden; /*HIDE WHEN IN MEDIA QUERY */
}
nav{
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-left: 2em;
align-items: center;
}
#nav-list{
margin-top: 0;
display: flex;
flex-direction: row;
justify-content: row;
list-style: none;
margin-bottom: 0;
visibility: visible;
}
.nav-list-item{
margin: 1em;
font-size: 1.5rem;
font-weight: 700;
}
I'm currently using a simple script I had found on css-tricks but am open to alternative suggestions to resolve the problem of wanting to simply hide and show the nav menu without any issues affecting the other layout in the large media query.

You need set the display property of #nav-list back to flex when switching to larger viewport, since it's already overrided when mobile navigation is toggled.
#media screen and (min-width: 760px){
#nav-list {
display: flex!important;
}
}

Why can't I call a class for an onclick event?

So it looks like my javascript onclick events are only functioning with ID's but when i call the class "listButton" only the first list item (All Rewards) closes the dropdown div.
When i click on any other list item (Food Rewards, Beverage Rewards, Holiday Rewards, Classes Rewards, TBA) it does not close my dropdown div.
I'm unsure why this is so. Is there another method to complete this? I must use vanilla JS.
var overlay2 = document.getElementById("overlay2");
var dropdown = document.getElementById("rewardsDropdown");
var listButton = document.querySelectorAll(".listButton");
document.getElementById("dropdownButton").onclick = function() {
dropdown.classList.add("open");
overlay2.classList.add("open");
};
function removeOpenRewards() {
dropdown.classList.remove("open");
overlay2.classList.remove("open");
};
for (i = 0; i < listButton.length; i++) {
listButton[i].addEventListener("click", removeOpenRewards);
}
overlay2.addEventListener("click", removeOpenRewards);
document.getElementById("close").addEventListener("click", removeOpenRewards);
#container #activeRewards #mobileDropdown #overlay2 {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
#container #activeRewards #mobileDropdown #overlay2.open {
display: block;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont {
width: 100%;
height: 59px;
margin: 15px 0 20px 0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:focus {
background-color: #F0F0F0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:after {
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #C7C7C7;
position: absolute;
right: 40px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown {
width: 100%;
display: none;
}
#container #activeRewards #mobileDropdown #rewardsDropdown.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 1000;
background-color: #FFFFFF;
left: 0;
bottom: 0;
padding-bottom: 30px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close {
color: #D63A5E;
background-color: #FFFFFF;
border-radius: 20px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
font-size: 20px;
position: absolute;
left: 20px;
top: -45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 15px;
width: 15px;
padding: 5px 5px 7px 6px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:hover {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:focus {
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
background-color: #AF2B49;
}
#container #activeRewards #mobileDropdown #rewardsDropdown h4 {
color: #505050;
text-align: center;
font-size: 18px;
font-weight: bolder;
margin: 30px 0;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList {
height: 360px;
overflow: scroll;
width: 95%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar {
background-color: transparent;
width: 5px;
margin-left: 5px;
padding-left: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar-thumb {
background-color: #E0E0E0;
border-radius: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div {
width: 95%;
height: 59px;
margin-top: 5px;
padding-right: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button:focus {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
<div id="container">
<div id="activeRewards">
<div id="mobileDropdown">
<div id="dropdownButtonCont">
<button id="dropdownButton">All Rewards
<span>(5)</span>
</button>
</div>
<div id="overlay2"></div>
<div id="rewardsDropdown">
<span id="close">×</span>
<h4>Reward Categories</h4>
<div id="dropdownList">
<div>
<button class="listButton">All Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Food Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Beverage Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Holiday Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Classes Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">TBA
<span>(5)</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So replace:
document.querySelector(".listButton").addEventListener("click", removeOpenRewards);
with:
var listButtons= document.querySelectorAll(".listbutton");
listButtons.forEach(function(listButton) {
listButton.addEventListener("click", removeOpenRewards);
});