Develop Reference

Force (rectangular) image to display as square with side length = variable parent div's width

I have a centered flexbox parent div, #con, with % width, which has an image(s)-containing div (.block) sandwiched between two padded text divs (#info and #links). How can I force .block img to be a square with side length equal to #con's width with JS or CSS? .block could contain 1x1=1 images, 2x2=4 images, etc; thus, background-image is not an option. Imitating the solution here only seems to work if I replace con.width() in the JS with a specific value (e.g. 300px, as shown here with this placeholder image), which is unideal.
var con = $("#con");
$(".block").css("height", con.width(), "width", con.width());
body {
font-size:1rem;
text-align:center;
margin:0;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
#con {
width:50%;
max-width:300px;
display:flex;
flex-flow:row wrap;
justify-content:center;
margin:5rem auto;
border:1px solid black;
}
.block {width:100%; overflow:hidden; background:black;}
.block img {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="con">
<div id="info">...</div>
<div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div>
<div id="links">...</div>
</div>

You don't need JS for this: just use aspect-ratio: 1 to force a square aspect ratio. You might want to add display: block to ensure the <img> is not displayed inline (which is the default) as well. See proof-of-concept below:
body {
font-size: 1rem;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#con {
width: 50%;
max-width: 300px;
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5rem auto;
border: 1px solid black;
}
.block {
width: 100%;
overflow: hidden;
background: black;
}
.block img {
display: block;
object-fit: cover;
width: 100%;
aspect-ratio: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="con">
<div id="info">...</div>
<div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div>
<div id="links">...</div>
</div>
If you want to support browsers that do not have aspect-ratio support, you can use a combination of a pseudo-element + padding-bottom hack to set a fixed aspect ratio instead:
body {
font-size: 1rem;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#con {
width: 50%;
max-width: 300px;
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5rem auto;
border: 1px solid black;
}
.block {
width: 100%;
overflow: hidden;
background: black;
position: relative;
}
.block::before {
width: 100%;
padding-bottom: 100%;
content: '';
display: block;
}
.block img {
display: block;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="con">
<div id="info">...</div>
<div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div>
<div id="links">...</div>
</div>

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.

Making navbar stick to the screen

<div class="header">
<div class="navflex">
<img src="logo.svg">
<nav>
<ul>
<li id="box"><input type="text" class="search-bar" placeholder="Search"></li>
<li><img src="notification.svg" class="notication"></li>
<li><img src="user_1.svg"></li>
</ul>
</nav>
</div>
CSS CODE:
ul{
margin-left: 31px;
}
a{
text-decoration: none;
color: #333;
}
image{
width: 100%;
}
.search-bar{
padding-left: 20px;
}
.navbar{
/*background-color: #047aed;*/
color: #fff;
height: 50px;
width: 100%;
}
.navflex{
/*max-width: 1100px; */
margin: 0 auto;
overflow: 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 100%;
width: 100%;
flex: 1 1 auto;
position: sticky;
z-index: 100;
border-top: 0;
}
.navflex > nav > ul {
display: flex;
flex-grow: 1;
/*flex-direction: row;
justify-content: flex-end;*/
align-items: center;
overflow: hidden;
/*position: relative;*/
}
.navflex > nav {
width: 100%;
}
.navflex > nav > ul > li {
width: auto;
margin: 10px;
}
.navflex > nav > ul > li > input {
width: 80%;
}
#box > input{
width: 98%;
height: 30px;
border: 1px;
background: url(search.svg) no-repeat;
background-size: 15px;
background-position: left;
}
#box{
width: 100%;
}
I am trying to make my navbar sticky/fixed/absolute. I want it to be fixed at top of the page and when scroll it must not vanish away. I have tried changing the position attribute multiple times but have found no success. I also tried using z-index to be 100 and still there has been no change in navbar. Kindly help me out.

I think it will work.
ul{
margin-left: 31px;
}
li {
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
image{
width: 100%;
}
.search-bar{
padding-left: 20px;
}
.navbar{
/*background-color: #047aed;*/
color: #fff;
height: 50px;
width: 100%;
}
.navflex{
/*max-width: 1100px; */
margin: 0 auto;
overflow: 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 100%;
width: 100%;
flex: 1 1 auto;
position: sticky;
z-index: 100;
border-top: 0;
}
.navflex > nav > ul {
display: flex;
flex-grow: 1;
/*flex-direction: row;
justify-content: flex-end;*/
align-items: center;
overflow: hidden;
/*position: relative;*/
}
.navflex > nav {
width: 100%;
}
.navflex > nav > ul > li {
width: auto;
margin: 10px;
}
.navflex > nav > ul > li > input {
width: 80%;
}
#box > input{
width: 98%;
height: 30px;
border: 1px;
background: url(search.svg) no-repeat;
background-size: 15px;
background-position: left;
}
#box{
width: 100%;
}
.header {
position: sticky;
top: 0;
}
<div class="header">
<div class="navflex">
<img src="logo.svg">
<nav>
<ul>
<li id="box"><input type="text" class="search-bar" placeholder="Search"></li>
<li><img src="notification.svg" class="notication"></li>
<li><img src="user_1.svg"></li>
</ul>
</nav>
</div>
</div>

This should do it:
.header {
position: sticky;
top: 0;
}

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;
}
}

modal does not display with side navbar overlap

I am at my wits end trying to figure out how to make the sign in modal
mobile responsive and continue to show display when the screen is down
to 320x568.
Here is the modal html
<body>
<div class="navbar-fixed">
<nav style="background-color: white;">
<div class="nav-wrapper">
<!-- Logo goes here -->
<a [pphref="index.html" class="brand-logo right">
<img class="responsive-img" src="../assets/images/HG3.png">
</a>
<!-- Collapsable menu is here -->
<a href="#" data-activates="mobile-demo" class="button-collapse">
<i class="material-icons">menu</i>
</a>
<ul class="left hide-on-med-and-down">
<li class="active">
Home
</li>
<li>
Contact Us
</li>
<li>
Favorites
</li>
<li>
<!-- Modal Trigger, the 'href' points to the Modal Structure -->
<a class="waves-effect waves-light loginbtn btn modal-trigger" data-toggle="modal" href="#login-modal" id="signInBtn">Sign In</a>
<a class="waves-effect waves-light loginbtn btn modal-trigger" data-toggle="modal" href="#login-modal" id="signOutBtn">Sign Out</a>
<!-- Modal Structure -->
<div class="modal fade" id="login-modal" tabindex="-1" data-toggle="modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
Here is CSS. Media queries are set at min-width. I'm not sure if I need to change the z-index and change things around that way.
nav ul a,
nav .brand-logo {
color: #444;
}
p {
line-height: 2rem;
}
/* This css is for the .main class */
#main {
margin: 0 auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch
}
.main-container {
background-color: #f8f8f8;
position: relative;
left: 0;
-webkit-transition: left .2s ease-in-out;
transition: left .2s ease-in-out
}
.container {
width: 100%;
max-width: 1440px;
position: relative;
margin: 0 auto;
padding: 0 20px
}
#media screen and (min-width:840px) {
.container {
padding: 0 40px
}
}
.hero {
background-position: center center;
background-size: cover;
background-image: url("../images/greenjuice.jpg");
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
overflow: hidden;
height: 100vh;
-webkit-transition: left .2s ease-in-out;
transition: left .2s ease-in-out
}
.hero .container {
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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.hero h1 {
width: 100%;
text-shadow: -2px 2px 10px rgba(55, 55, 55, 0.25)
}
#hero {
position: fixed;
top: 65px;
left: 0;
right: 0;
z-index: 1
}
#after-hero {
margin-top: 100vh
}
.wf-active #hero .tag {
-webkit-animation: opacity 1s ease;
animation: opacity 1s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.wf-active #hero h1 {
-webkit-animation: opacity 2s ease .25s;
animation: opacity 2s ease .25s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.hero--generic {
background-image: url("../images/greenjuice.jpg");
padding-top: 100px;
padding-bottom: 100px;
height: auto;
min-height: 400px
}
.hero--generic h1 {
font-size: 48px
}
#media screen and (min-width:840px) {
.hero--generic h1 {
font-size: 700px
}
}
.hero--index {
background-image: url("../images/greenjuice.jpg")
}
.hero--index h1 {
margin-bottom: .6em
}
.hero--index h1 {
color: rgb(17, 22, 31)
}
.hero--index h3 {
font-size: 48px;
color: whitesmoke;
margin-bottom: 1em;
text-shadow: -2px 2px 10px rgba(55, 55, 55, 0.25);
line-height: 1.2em
}
.responsive-img {
height: 100px;
width: 100%
}
#media screen and (min-width:0) and (max-width:479px) {
.hero--index h3 {
display: none
}
}
.hero--index .tag {
color: #717f81
}
/* Css for .panel */
.panel {
position: relative;
z-index: 15;
}
#media screen and (min-width:840px) {
.panel--solutions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
}
.solution {
background-size: cover;
overflow: hidden;
color: #656565
}
#media screen and (min-width:840px) {
.solution {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 50%;
height: auto
}
}
#media screen and (min-width:840px) {
.solution:before {
float: left;
padding-top: 100%;
content: ""
}
}
.solution__container {
background-color: rgba(255, 255, 255, 0.801);
position: relative;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/* padding:350px 200px; */
width: 100%;
margin: 200px 0px;
/* margin-bottom: auto; */
-webkit-transition: background-color .5s ease;
transition: background-color .5s ease
}
#media screen and (min-width:1200px) {
.solution__container {
padding: 100px 80px
}
}
#media screen and (min-width:1600px) {
.solution__container {
padding: 100px
}
}
#media screen and (min-width:840px) {
.solution__container:hover,
.solution__container:focus {
background-color: transparent
}
}
#media screen and (min-width:840px) {
.solution__container:hover .solution__inner,
.solution__container:focus .solution__inner {
background-color: rgba(255, 255, 255, 0.904);
border-color: transparent
}
}
.solution__container p {
width: 100%;
text-align: center
}
.solution__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0;
-webkit-transition: all .6s ease;
transition: all .6s ease
}
#media screen and (min-width:840px) {
.solution__inner {
-webkit-box-pack: center;
-ms-flex-pack: center;
/* justify-content:center; */
padding: 40px;
border: 2px dashed #188138
}
}
.solution__inner * {
text-align: center
}
.solution__header {
font-size: 30px;
color: #188138
}
#media screen and (min-width:840px) {
.solution__header {
font-size: 40px
}
}
.solution__body {
margin: 20px auto 30px;
font-size: 16px
}
#media screen and (min-width:840px) {
.solution__body {
font-size: 18px
}
}
.solution--ordering {
background-image: url()
}
.solution--category {
background-image: url()
}
.solution__icon {
margin-bottom: 30px
}
/* End of main container css */
/* Start of footer css */
footer {
position: relative;
z-index: 16;
color: #fff;
overflow: hidden
}
.panel--learn-more {
background-color: #05180ae1;
overflow: hidden;
-webkit-transition: background-color .3s ease;
transition: background-color .3s ease
}
#media screen and (min-width:840px) {
.panel--learn-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 158px
}
}
.panel--learn-more:hover,
.panel--learn-more:focus {
background-color: #082505
}
.learn-more__header {
font-size: 40px;
margin: 40px 20px;
text-align: center;
text-transform: none
}
#media screen and (min-width:840px) {
.learn-more__header {
margin: 0 auto;
font-size: 35px
}
}
.learn-more__link {
font-style: italic;
text-decoration: none
}
#media screen and (min-width:0) and (max-width:839px) {
.learn-more__link {
display: block
}
.solution__container {
padding: 0px;
}
}
.learn-more__link:hover,
.learn-more__link:focus {
text-decoration: none
}
.footer__bottom {
background-color: #233c23;
overflow: hidden
}
.footer__bottom .container {
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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 190px
}
#media screen and (min-width:840px) {
.footer__bottom .container {
height: 100px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row
}
}
.footer__navigation {
margin: 0 auto;
padding: 0;
font-size: 18px;
text-align: center
}
#media screen and (min-width:840px) {
.footer__navigation {
margin: 0 30px
}
}
.footer__navigation a {
color: #fff
}
.footer__navigation a:hover,
.footer__navigation a:focus {
color: #fff
}
.footer__item {
display: inline-block;
padding: 0 12px 6px
}
#media screen and (min-width:840px) {
.footer__item {
padding: 0 20px
}
}
.footer__item__link {
text-decoration: none
}
.footer--social {
margin: 0 auto 20px;
padding: 0;
text-align: center
}
#media screen and (min-width:840px) {
.footer--social {
margin: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
}
.footer__social-link {
padding: 0 8px
}
.footer__social-link .icon {
width: 48px;
height: 48px;
fill: #7e7e7e
}
.footer__social-link .icon:hover,
.footer__social-link .icon:focus {
fill: #ccc
}
.footer-background {
background-color: #f8f8f8;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 0;
opacity: 0
}
.page-bottom .footer-background {
opacity: 1
}
/* End of footer css. */
.button-collapse {
color: #26a69a;
}
.parallax-container {
min-height: 380px;
line-height: 0;
height: auto;
color: rgba(255, 255, 255, .9);
overflow: visible;
}
.parallax-container .section {
width: 100%;
}
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
footer.page-footer {
margin: 0;
}
.materialboxed {
width: 30%;
margin: auto;
float: left;
}
.brand-logo {
width: 10%;
opacity: 0.8;
}
.carousel {
overflow: visible;
}
.carousel .carousel-item {
width: 300px;
height: 300px;
}
.modal-body {
color: black;
}
.loginbtn {
background-color: #062605;
}
.btn {
background-color: #032504;
}
.btn:hover,
.btn-large:hover {
background-color: #1B5E20;
}
.btn:focus,
.btn-large:focus,
.btn-floating:focus {
background-color: rgb(7, 31, 8);
}
/* CSS for modal. */
#login_register_btn {
float: left;
margin-left: 5px;
}
#login_lost_btn {
float: left;
}
#login-btn {
float: left;
margin-right: 5px;
}
#register_login_btn {
float: left;
}
#register-btn {
float: left;
margin-right: 5px;
}
.modal {
display: none;
position: fixed;
left: 0;
right: 0;
background-color: #fafafa;
padding: 0;
/* max-height: 70%; */
max-height: 59%;
width: 55%;
margin: auto;
overflow-y: hidden !important;
border-radius: 2px;
will-change: top, opacity;
}
.modal-overlay {
z-index: 0;
}
.modal .modal-content {
padding: 24px;
margin-bottom: 69px;
}
/* End CSS for Modal. */
#media only screen and (max-width: 992px) {
.parallax-container .section {
position: absolute;
top: 40%;
}
#index-banner .section {
top: 10%;
}
/* This css is for the .main class */
}
#media only screen and (max-width: 600px) {
#index-banner .section {
top: 0;
}
}