I created a basic example to illustrate the problem: https://codepen.io/itsechi/pen/wvmQEJb.
HTML:
<body>
<header>
<h1>RANDOM TEXT</h1>
<h1>MORE RANDOM TEXT</h1>
<header>
<main class="contact-main">
<section class="contact-section">
<h2>CONTACT US</h2>
<p>Random text here Random text here Random text here</p>
<p>Random text here Random text here Random text here</p>
</section>
<img src="https://i.imgur.com/g6xj3zE.jpg">
</main>
</body>
CSS:
html {
box-sizing: border-box;
font-size: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
font-family: "League Spartan", sans-serif;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #1B191A;
position: relative;
display: flex;
justify-content: center;
}
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("https://i.imgur.com/TJA3v8q.jpg") no-repeat center/cover;
z-index: -1;
opacity: 0.4;
}
.contact-main {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.contact-section {
-moz-text-align-last: left;
text-align-last: left;
margin: 3rem;
font-weight: 500;
font-size: 1.3rem;
}
#media (max-width: 69.375em) {
.contact-section {
margin: 1rem;
margin-top: 2rem;
}
}
#media (max-width: 34.375em) {
.contact-section {
font-size: 0.9rem;
}
}
#media (max-width: 21.875em) {
.contact-section {
font-size: 0.6rem;
margin: 0.4rem;
}
}
.contact-section h2 {
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 1.5rem;
}
#media (max-width: 34.375em) {
.contact-section h2 {
font-size: 1.2rem;
}
}
.contact-section button {
font-family: inherit;
padding: 0.5rem 1rem;
margin-top: 1.5rem;
letter-spacing: 0.15em;
color: #CCAB5B;
background: none;
border: 2px solid #CCAB5B;
font-size: 1rem;
cursor: pointer;
}
.contact-section button:hover {
background-color: #CCAB5B;
color: #000;
}
#media (max-width: 34.375em) {
.contact-section button {
font-size: 0.7rem;
}
}
#media (max-width: 21.875em) {
.contact-section button {
font-size: 0.5rem;
padding: 0.3rem 0.8rem;
}
}
img {
border-radius: 50%;
margin-top: 3rem;
border: 3px solid #CCAB5B;
width: 30rem;
}
#media (max-width: 69.375em) {
img {
position: absolute;
top: 80%;
width: 20rem;
}
}
#media (max-width: 34.375em) {
img {
width: 12rem;
}
}
When I resize the page to see how it looks on smaller screens the background image only fills up the height of the viewport of body and the rest of the container is just background color. The issue is best seen if you try to check how the site looks on Nest Hub in devtools. How can I stop this from happening and make the background image either repeat or better, just fill the entire space when the page becomes scrollable? Thanks.
There are plenty of properties you can implement and combine:
background-position
background-attachment
background-repeat
background-size
if you want to repeat an image you should look into background-repeat. Otherwise you should combine those properties:
body {
background: url('https://via.placeholder.com/1920x1080.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* for demo purpose only */
body {
min-height: 500vh;
}
I think I found out what was causing the problem - it was the absolute positioning of the img. I simply changed the display of the main element to be a grid on smaller devices and now the background is working as it should!
#media (max-width: 69.375em) {
.contact-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
}
}
.contact-section {
-moz-text-align-last: left;
text-align-last: left;
margin: 3rem;
font-weight: 500;
font-size: 1.3rem;
grid-row: 1/2;
}
#media (max-width: 69.375em) {
img {
width: 20rem;
grid-column: span 2;
}
}
Related
I'm having some issues implementing media queries. I just made all the media queries I need. But it seems that now when I'm testing it my normal view (desktop has also changed for some reason) and when I go to the first media queries size. I can see that some elements like #taglineand #login-form are not adopted from the media queries but from a smaller size media queries same goes for normal view. They both adopted changes from this size #media only screen and (min-height: 768px) and (min-width: 1024px) instead of the things I specified for it. I don't understand what is going wrong here
regular scss:
#login-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
#side {
width: 30%;
background-color: $plain-white;
display: flex;
flex-direction: column;
padding: 20px;
border-right: 1px solid #ECECEC;
#side-caption {
width: 80%;
margin: 100px auto;
#appoint-full-logo {
width: 80%;
}
#tagline {
margin-top: -30px;
color: rgba(2, 159, 157, 1);
font-weight: 500;
font-size: 1.73em;
}
}
}
#login {
width: 70%;
height: 100%;
background-color: rgba(2, 159, 157, 1);
#login-form {
height:80% ;
width:80% ;
background-color: $plain-white;
margin: 130px auto;
border-radius: 5px;
display: flex;
flex-direction: column;
div {
height: 20%;
#welcome {
text-align: center;
font-weight: 550;
font-size: 2.5em;
margin-top: 50px !important;
color: #E8A87C;
}
}
#apply-text {
height: 15%;
font-size: 0.9em;
width: 70%;
margin: auto;
font-weight: 500;
// text-align: center;
}
#apply-form-fields,
#login-form-fields {
height: 45%;
display: flex;
flex-direction: column;
margin-left: 16%;
:first-child {
margin-top: 10px;
}
.form-group {
margin: 10px 0px;
width: 80%;
label {
font-weight: 500;
}
}
}
#apply-submited {
height: 10%;
width: 70%;
margin: auto;
p {
background-color: rgba(85, 255, 214, 0.50);
padding: 10px;
text-align: center;
font-weight: 600;
border-radius: 5px;
;
}
}
.button-field {
height: 20%;
.button {
cursor: pointer;
width: 70%;
height: 40%;
color: $white;
font-size: 1.1em;
margin: 10px auto;
background-color: #E8A87C;
border: none;
padding: 10px;
font-weight: 600;
border: solid 5px #E8A87C;
border-radius: 5px;
text-align: center;
&:hover {
color: #E27D60;
}
}
.change-form {
cursor: pointer;
text-align: center;
span {
font-weight: 600;
}
&:hover span {
color: #E8A87C;
}
}
}
}
}
}
Media queries located at bottom of style cheat
set media queries:
#media only screen and (min-width: 1366px) and (min-height: 1024px) {
#tagline {
margin-top: -17px !important;
font-size: 1.52em !important;
}
}
#media only screen and (min-width: 1024px)and (min-height: 1366px) {
#tagline {
margin-top: -17px !important;
font-size: 1.05em !important;
}
#appoint-full-logo {
width: 100% !important;
}
}
#media only screen and (min-width: 1024px)and (min-height: 768px) {
#tagline {
margin-top: -15px !important;
font-size: 1.05em !important;
}
#appoint-full-logo {
width: 100% !important;
}
#login-form {
width: 60% !important;
height: 80% !important;
margin-top: 110px !important;
}
#welcome {
font-size: 2em !important;
}
}
#media only screen and (min-width: 768px)and (min-height:1024px) {
#tagline {
margin-top: -10px !important;
font-size: 0.76em !important;
}
#appoint-full-logo {
width: 105% !important;
}
#login-form {
width: 80% !important;
height: 60% !important;
margin-top: 110px !important;
}
#welcome {
font-size: 1.9em !important;
}
}
1.
#media only screen and (min-height: 768px) and (min-width: 1024px) --- perhaps your window/browser height is Below 768px
2.
The ! IMPORTANT -flag often causes problems in code
3.
Your code in media-queries.scss should be nested in the same way
regular.scss is nested too
You might be overusing the !important keyword. When you’re using it, it states any other rule is overridden. Since the smaller media queries are what are looked at/executed first when the media query is set to min-width or min-height, you are probably instructing css to say “I see there are larger media queries, but I’ve been instructed by a smaller media query to honor its rules first and for most.
The CSS inside you media queries needs to be nested exactly like in your regular style rules.
Otherwise they get assigned more importance.
You might check this Codepen out.
#container {
#color {
height: 50vh;
background-color: red;
}
}
#container2 {
#color2 {
height: 50vh;
background-color: blue;
}
}
#media (min-width: 768px) {
/* not affected by querie */
#color {
height: 50vh;
background-color: blue;
}
/* affected by querie */
#container2 {
#color2 {
background-color: green;
}
}
}
<div id="container">
<div id="color"></div>
</div>
<div id="container2">
<div id="color2"></div>
</div>
is this impossible to do or something? been working all morning to try and position my video to the centre or try and change the size of the video to small so it can fit at least the key parts of the video so the user can see it on their mobile. What is the best solution to this? I've been researching a lot and can't find any help on this and makes me wonder maybe this is too much to ask for in CSS? unless there is another alternative... please let me know! many thanks!
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 1rem;
line-height: 1.5;
color: #333;
overflow-x: hidden;
background-color: whitesmoke;
}
.para {
font-size: 1.5em;
margin: auto 10px;;
}
.v-header {
height: 99vh;
display: flex;
align-items: center;
color: #fff;
}
#jsc {
/*display: none;*/
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-left: 1rem;
margin: auto;
text-align: center;
}
.container h1 {
font-size: 2.5em;
}
section {
display: flex;
}
.fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.fullscreen-video-wrap video {
min-width: 100%;
min-height: 100%;
}
#heading {
font-family: 'Coiny', cursive;
color: white;
font-size: 3rem;
display: none;
}
.header-overlay {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.65;
}
.header-content {
z-index: 2;
}
.header-content .jsc {
margin-bottom: 0;
}
.header-content .jsc {
font-size: 1.5rem;
display: block;
padding-bottom: 2rem;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 1.2rem;
padding: 1rem 2rem;
text-decoration: none;
}
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
#jsc {
height: 150px;
width: 150px;
}
.fullscreen-video-wrap {
position: absolute;
top: 50px;
right: 100px;
}
}
<div class="fullscreen-video-wrap">
<video src="seaturtle.mp4" autoplay="true" loop="true" muted="true"></video>
</div>
<div class="header-overlay"></div>
<div class="header-content">
<img id="jsc" src="jscc.png">
<h3 id="heading">Personal Training</h3>
Contact Me
</div>
</header>
Just add this in your "head" tag. This will automatically resize your video according to the device width.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
I'm trying to get the reddish gradient to work on the background image. There's an initial fallback image, and then this appended to the next background image: , linear-gradient(0deg,rgba(0,0,0,0.68),rgba(221,51,51,0.8)); - why is this not applying the gradient?
* {
color: #000000;
margin: 0px;
padding: 0px;
font-family: 'Open Sans',verdana,helvetica,arial,sans-serif;
font-size: 100%;
box-sizing: border-box;
}
.sadLeader {
width: 1088px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 10px;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"); /* fallback */
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"), linear-gradient(#eb01a5, #d13531);
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"), linear-gradient(0deg,rgba(0,0,0,0.68),rgba(221,51,51,0.8));
}
.sadLeader h3 {
font-size: 46px;
line-height: 56px;
font-weight: 400;
}
.sadLeader p {
font-size: 25px;
line-height: 28px;
margin: 25px 0;
}
.sadLeader span {
background: red;
display: flex;
}
.sadLeader span button {
color: #000;
background-color: #fff;
transition: all 0.3s ease;
font-size: 15px;
height: 55px;
padding: 0 36px;
border: none;
}
#media (min-width: 768px) {.sadLeader span button:nth-of-type(2) { margin-left: 5% }}
#media (max-width: 767px) {
.sadLeader span { flex-direction: column }
.sadLeader span button:nth-of-type(2) { margin-top: 5% }
}
<div class="sadLeader">
<h3>Some text</h3>
<p>Some more text to go here</p>
<span>
<button>Button 1</button>
<button>Another button here...</button>
</span>
</div>
* {
color: #000000;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', verdana, helvetica, arial, sans-serif;
font-size: 100%;
box-sizing: border-box;
}
.sadLeader {
width: 1088px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 10px;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg");
/* fallback */
background-image: linear-gradient(#eb01a5, #d13531), url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg");
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.68), rgba(221, 51, 51, 0.8)), url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg");
}
.sadLeader h3 {
font-size: 46px;
line-height: 56px;
font-weight: 400;
}
.sadLeader p {
font-size: 25px;
line-height: 28px;
margin: 25px 0;
}
.sadLeader span {
background: red;
display: flex;
}
.sadLeader span button {
color: #000;
background-color: #fff;
transition: all 0.3s ease;
font-size: 15px;
height: 55px;
padding: 0 36px;
border: none;
}
#media (min-width: 768px) {
.sadLeader span button:nth-of-type(2) {
margin-left: 5%
}
}
#media (max-width: 767px) {
.sadLeader span {
flex-direction: column
}
.sadLeader span button:nth-of-type(2) {
margin-top: 5%
}
}
<div class="sadLeader">
<h3>Some text</h3>
<p>Some more text to go here</p>
<span>
<button>Button 1</button>
<button>Another button here...</button>
</span>
</div>
Is this what you are after?
Your background-image covers the whole container (background-size: cover;), so the gradient won't become visible. It would be visible around the image if the image were smaller, not covering the container. To have the image only as a fallback, notate it as below.
* {
color: #000000;
margin: 0px;
padding: 0px;
font-family: 'Open Sans',verdana,helvetica,arial,sans-serif;
font-size: 100%;
box-sizing: border-box;
}
.sadLeader {
width: 1088px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 10px;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"); /* fallback */
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"), linear-gradient(#eb01a5, #d13531);
background-image: linear-gradient(0deg,rgba(0,0,0,0.68),rgba(221,51,51,0.8));
}
.sadLeader h3 {
font-size: 46px;
line-height: 56px;
font-weight: 400;
}
.sadLeader p {
font-size: 25px;
line-height: 28px;
margin: 25px 0;
}
.sadLeader span {
background: red;
display: flex;
}
.sadLeader span button {
color: #000;
background-color: #fff;
transition: all 0.3s ease;
font-size: 15px;
height: 55px;
padding: 0 36px;
border: none;
}
#media (min-width: 768px) {.sadLeader span button:nth-of-type(2) { margin-left: 5% }}
#media (max-width: 767px) {
.sadLeader span { flex-direction: column }
.sadLeader span button:nth-of-type(2) { margin-top: 5% }
}
<div class="sadLeader">
<h3>Some text</h3>
<p>Some more text to go here</p>
<span>
<button>Button 1</button>
<button>Another button here...</button>
</span>
</div>
First problem is the "about myself" (home_about_box), doing something that will not allow me to put it on top of an image. I think it has something to do with the margin, but I have not found a solution.
Second problem is that the images in the Portfolio section (portfolio_home), will not touch each other, it leaves a blank space between the pictures.
Last problem is with having a horizontal scrollbar on the bottom of my page. I have searched for a solution, but not found any.
If you have any solution, I would appreciate you posting the code and an explanation, as I am quite new to this!
Cheers! Any constructive feedback is well appreciated!
HTML
<section class="home.about">
<div class="about.bg">
<div class="home_about_box">
<h1>About Myself</h1>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
</div>
</section>
<section class="portfolio_home" id="portfolio">
<h1>Some of my work</h1>
<figure class="port-item">
<!-- Portfolio 1 -->
<img src="https://i.imgur.com/eBRYWII.png" alt="portfolio item"/>
<figcaption class="port-desc">
<p>Geofilters</p>
</figcaption>
</figure>
<!-- Portfolio 2 -->
<figure class="port-item">
<img src="https://i.imgur.com/gAfgliA.png" alt="portfolio item"/>
<figcaption class="port-desc">
<p>Quixz eSports</p>
</figcaption>
</figure>
<!-- Portfolio 3 -->
<figure class="port-item">
<img src="https://i.imgur.com/IjoGmUT.png" alt="portfolio item"/>
<figcaption class="port-desc">
<p>3D Renders</p>
</figcaption>
</figure>
<!-- Portfolio 4 -->
<figure class="port-item">
<img src="https://i.imgur.com/4zymXa8.png" alt="portfolio item"/>
<figcaption class="port-desc">
<p>Backgrounds</p>
</figcaption>
</figure>
</section>
<section class="cta">
<div class="container">
<h1 class="title title-cta">Want to see more?
<span>Then what are you waiting for?</span>
</h1>
See More
</div>
</section>
CSS
* {
box-sizing: border-box;
transition: all ease-in-out 250ms;
}
body {
margin: 0;
font-family: "Lato", sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
padding: 1em .5em 0;
background-size: cover;
}
.container {
width: calc(100%-4px);
margin: 0 auto;
}
/* Header
========= */
header {
position: absolute;
width: 100%;
}
nav ul {
margin: 0;
padding: 1em 0;
list-style: none;
}
nav li {
display: inline-block;
margin: .5em
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .9rem;
padding: .5em;
color: #FFF;
}
nav a:hover,
nav a:focus{
color: #DDD;
}
#media (min-width: 60rem) {
.logo{
float: left;
text-align: center;
align-content: center;
}
nav{
float: right;
text-align: center;
margin-right: 1em;
}
}
/* Buttons
========== */
.button_top {
display: inline-block;
font-size: 1.3rem;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
border-color: #174FC1;
padding: .5em 1em;
color: #FFF;
}
.button_top:hover,
.button_top:focus {
background: #174FC1;
color: #FFF;
}
.button_dark {
display: inline-block;
font-size: 1.3rem;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
border-color: #FFF;
padding: .5em 1em;
color: #FFF;
margin-bottom: 1em;
}
.button_dark:hover,
.button_dark:focus {
background: #FFF;
color: #000;
}
#media (min-width: 25rem) {
.button_top {
font-size: 1.7rem;
padding: .3em 1em
}
}
#media (min-width: 60rem) {
.button_top {
font-size: 2.4rem;
padding: .3em 1em;
margin-top: -1em;
}
}
#media (min-width: 25rem) {
.button_dark {
font-size: 1.7rem;
padding: .3em 1em
}
}
#media (min-width: 60rem) {
.button_dark {
font-size: 2rem;
padding: .3em 1em;
}
}
.clearfix::after,
section::after,
footer::after{
content: "";
display: block;
clear: both;
}
/* Typography
========= */
.title {
font-size: 2rem;
margin-bottom: 1.6em;
margin-top: 5em;
}
.title span {
font-weight: 300;
display: block;
font-size: 1.3rem;
}
.title-cta {
margin: 0 0 1em;
}
#media (min-width: 60rem) {
.title{
font-size: 4rem;
margin-top: 1.5em;
}
}
h1 {
font-weight: 800;
margin-top: 0;
}
.unstyled-list {
margin: 0;
padding: 1.3em;
list-style-type: none;
text-align: left;
}
/* Home.hero
========= */
.home-hero {
background-image: url(https://i.imgur.com/yUFKqAe.jpg);
background-size: cover;
background-position: center;
padding: 1em;
color: #FFF;
width: 100vw;
height: 100vh;
}
#media (min-width: 25rem) {
.home-hero{
width: 100vw;
height: 100vh;
}
}
#media (min-width: 60rem) {
.home-hero{
width: 100vw;
height: auto;
}
}
#media (min-height: 30rem) {
.home-hero{
width: 100vw;
height: 100vh;
}
}
/*Home About */
.home_about_box {
background-color: #232323;
font-size: .8em;
padding: 4em;
outline: 2px solid #174fc1;
outline-offset: -3em;
color: #FFF;
position: relative
}
.home_about_box h1 {
color: #174fc1;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.3em;
background: #232323;
padding: 0 0.5em
}
#media (min-width: 25rem) {
h1 {
font-size: 1.6rem;
}
.home_about_box h1 {
top: 1.3rem;
}
}
#media (min-width: 60rem) {
h1 {
font-size: 1.2rem;
}
.about.bg {
background-image: url(https://i.imgur.com/aTF2hwR.jpg);
padding: 5em;
}
.home_about_box {
font-size: .8em;
width: 25em;
margin: 0;
}
.home_about_box h1 {
top: 1.5rem;
}
}
/* portfolio
*/
.portfolio_home {
margin: 1.8em 0 0;
background-size: cover;
}
.portfolio_home h1 {
color: #174FC1;
font-size: 3em;
margin: auto;
padding: 0 0 .3em 0;
}
.port-item {
margin: 0;
position: relative;
}
.port-item img {
display: block;
}
.port-desc {
position: absolute;
z-index: 100;
bottom: 0em;
left: 0em;
right: 0em;
color: #FFF;
background: rgba(0,0,0,.75);
padding-bottom: 1em;
padding-top: 1em;
}
.port-desc p {
margin: .5em;
background-size: 100% 100%;
}
#media (min-width: 40rem) {
.port-item {
width: 50%;
float: left;
}
}
#media (min-width: 60rem) {
.port-item {
width: 33.3333334%;
float: left;
overflow: hidden
}
.port-desc {
transform: translateY(150%);
}
.port-item:hover .port-desc {
transform: translateY(0%)
}
}
/* CTA
*/
.cta{
background-color: #174fc1;
padding: 0.1em;
}
.cta h1 {
margin-top: 1em;
color: #FFF
}
/* Footer */
footer {
background: #232323;
color: #FFF;
}
Firstly you need to minimize the codepen like the this you don't need everything in it.
First Problem:-
For the first issue make sure your z-index is greater than the element overlapping it in your case it's .port-desc giving a z-index of 100 so you need something more than 100.
.home_about_box {
background-color: #232323;
font-size: 0.8em;
padding: 4em;
outline: 2px solid #174fc1;
outline-offset: -3em;
color: #fff;
z-index: 101;
}
Second Problem:-
You need to remove the padding on left and right I assume that's what you meant when you say they are not touching.
img {
max-width: 100%;
height: auto;
padding: 1em 0.5em 0;
background-size: cover;
}
Third Problem:-
The scrollbar is due to width being 100wh, you can update the width to be 100%.
#media (min-height: 30rem) {
.home-hero {
width: 100%;
height: 100vh;
}
}
Please could somebody help me with flex for pushing my footer down / expanding the content to fit?
https://jsfiddle.net/9xjy78gj/
Hopefully it's clear to see from the site what my issue is.
I'd just like to use flex to push the footer down and expand the content div appropriately, without using set heights for the content div etc. if possible?
Many thanks!
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page_wrap">
<header>
<a href="/">
<h1>Close<span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Range</h1>
</a>
<hr />
</header>
<div id="refinement">
<form>
<div class="form_component">
<select id="narrow">
<option value="select" selected disabled>Please Select</option>
</select>
</div>
<div class="form_component">
<input id="driving" type="radio" name="travelmode" value="Driving" checked /> <i class="fa fa-car" aria-hidden="true"></i>
</div>
<div class="form_component">
<input id="walking" type="radio" name="travelmode" value="Walking" /> <i class="fa fa-male" aria-hidden="true"></i>
</div>
</form>
</div>
<div id="jquery_placeholder">
<!-- JQuery loads PHP output into here-->
</div>
<div id="place_results_wrap">
<!-- and here -->
<div id="content">
<h2>Let's explore!</h2>
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
</div>
<footer class="footer">
<div id="google">
<img src="/assets/i/google.png" alt="Powered by Google" />
</div>
</footer>
</div>
</body>
</html>
CSS
a, a:hover
{
text-decoration: none;
}
body
{
font-family: 'Open Sans', sans-serif;
background: #ECECEA;
font-size:16px;
}
#page_wrap
{
width:100%;
}
header
{
background: #fff;
text-align: center;
padding: 1.250em;
}
header h1
{
font-size: 6em;
font-weight: 400;
color: #655e5e;
margin: 0;
display: inline-block;
}
#media screen and (max-width: 550px)
{
header h1 {
font-size: 3em;
}
}
header hr
{
max-width: 36em;
margin-bottom: 0px;
}
header .fa-map-marker
{
color: #ec3b3b;
font-size: 1.2em;
}
#refinement
{
padding: 0.5em 1.25em 1.25em;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
#refinement form
{
display: flex;
justify-content: center;
}
.form_component
{
margin: 0 0.4em;
display: none;
}
.form_component i.fa
{
font-size: 1.4em;
color: #655e5e;
}
#content
{
text-align: center;
background: #655e5e;
padding: 1.25em;
}
#content h2
{
color: #fff;
font-weight: 400;
font-size: 4em;
margin: 0;
}
#media screen and (max-width: 415px) {
#content h2
{
font-size:2em;
}
}
#content i.fa-globe
{
font-size: 18em;
color: #fff;
}
.place_results
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 1.25em 0;
}
.next_page
{
padding: 0 1.250em;
width: 100%;
text-align: center;
}
.next_page button
{
background-color: #fff;
border: none;
color: #655e5e;
padding: 0.3125em 2em;
text-decoration: none;
display: inline-block;
font-size: 1em;
font-weight: 600;
cursor: pointer;
border-radius: 1.25em;
}
.next_page button:hover
{
background-color: #f6f6f6;
}
.place
{
width: 24em;
height: 27em;
margin: 1.25em;
display: flex;
flex-direction: column;
-webkit-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
-moz-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
background: #fff;
}
#media screen and (max-width: 1920px) {
.place
{
width: 30%;
}
}
#media screen and (min-width: 900px)
and (max-width: 1366px){
.place
{
width: 45%;
}
}
#media screen and (min-width: 768px)
and (max-width: 1366px){
.place
{
width: 44%;
}
}
#media screen and (min-width: 415px)
and (max-width: 760px){
.place
{
width: 90%;
}
}
#media screen and (max-width: 415px) {
.place
{
width: 90%;
}
}
.place_image
{
width: 100%;
height: 14.0625em;
background-size: cover !important;
background-clip: content-box !important;
}
.place_description
{
padding: 0.625em;
display: flex;
flex-direction: column;
flex: 1 1 0;
background: #fff;
}
.distance_container p.distance
{
font-weight:600;
}
.place_description p, .place_description a
{
color: #655e5e;
font-weight: 400;
margin: 0;
}
.place_description .place_open p
{
margin: 0;
color: #49b51c;
}
.place_description i.fa
{
width: 1.25em;
}
.place_title
{
flex: 1 1 0;
}
.place_title h3
{
color: #655e5e;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
margin: 0;
font-size: 1.4em;
line-height: 1.3;
}
#media screen and (max-width: 415px) {
.place_title h3
{
font-size: 1.2em;
}
}
.rating_container
{
width: 100%;
}
.rating_bar {
width: 6.875em;
height: 1.313em;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
background-repeat: repeat-x;
background-position: 0 0;
}
.rating {
height: 1.313em;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
background-position: 0 100%;
background-repeat: repeat-x;
}
.place_description .place_location
{
margin-bottom: 0.625em;
}
.place .distance_container, .place .vicinity_container, .place .place_phone_container
{
display: flex;
}
#load_container
{
padding: 1.25em;
text-align: center;
}
#load i.fa-spin
{
font-size: 4em;
color: #ec3b3b;
}
#jquery_placeholder
{
display:none;
width:100%;
}
footer
{
padding: 1.25em;
text-align: right;
background: #fff;
}
footer #google img
{
width: 10em;
}
#error
{
padding: 1.25em;
background: #ec3b3b;
}
#error p
{
font-size: 1.2em;
margin: 0;
color: #fff;
text-align: center;
}
#error i.fa-exclamation-circle
{
color: #fff;
}
Flexbox can do that providing you use flex-direction:column like so:
If you don't want sections to expand to take up spare space, just remove the flex:1.
html,
body {
height: 100%;
}
body {
min-height: 100%;
text-align: center;
/* for demo */
}
.page-wrap {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
background: pink;
}
footer {
background: rebeccapurple;
color: #fff;
}
aside {
flex: 1;
background: orange;
}
main {
flex: 1;
background: grey;
}
<div class="page-wrap">
<header>
<h1>Header</h1>
</header>
<aside>I'm a secondary header</aside>
<main>I'm main content</main>
<footer>
<h1>Footer</h1>
</footer>
</div>