I placed a 100% value in iframe, I am not sure how to fix this and I tried lower values and its locked at that size for some reason. I would like it to take up a larger size to fit the full game in its iframe.
I appreciate any help or solutions given in advance.
body {
font-family: "Gotham", sans-serif;
}
.gameScene {
height: 100%;
}
.Main {
height: 200%;
}
#Category {
font-family: "Gotham", sans-serif;
}
.fa-expand {
font-size: 1em;
color: white;
}
button:hover {
transform: scale(1.15);
filter: drop-shadow(4px 2px 4px black);
}
/* Scaling for all devices */
#media (max-width: 575px) {
.fa-gamepad, .fa-expand {
font-size: 16px;
}
}
#media (min-width: 576px) and (max-width: 767px) {
.fa-gamepad, .fa-expand {
font-size: 18px;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.fa-gamepad, .fa-expand {
font-size: 20px;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.fa-gamepad, .fa-expand {
font-size: 22px;
}
}
#media (min-width: 1200px) {
.fa-gamepad, .fa-expand {
font-size: 24px;
}
}
<script src="https://kit.fontawesome.com/faea65eadf.js" crossorigin="anonymous"></script>
<link href="https://fonts.cdnfonts.com/css/gotham" rel="stylesheet">
<div class="GameHolder" style="display: flex; flex-direction: column;">
<iframe class="gameScene" src="https://snowrider3d.com/snow-rider-3d.embed" style="border: none; border-radius: 2em 2em 0em 0em;"></iframe>
<div style="background-color: #0f101e; border-radius: 0em 0em 2em 2em; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px;">
<div style="display: flex; align-items: center;">
<img src="https://img.gamedistribution.com/3b79a8537ebc414fb4f9672a9b8c68c8-512x512.jpeg" style="width: 2.5em; height: 2.5em; border-radius: 1000000000000em">
<div style="margin-left: 10px;">
<h3 style="margin: 0.1em; color: White;">Snow Rider 3D</h3>
<p id="Category" style="margin: 0; background: #27211d; border-radius: 100em; width: max-content; padding: 0.3em; font-size: 12px; color: #ffc400;">Parkour</p>
</div>
</div>
<button style="transition: all 0.3s ease-in-out; padding: 1em; border: none; background-image: linear-gradient(#e23c03, #fa4e12); #ddd; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">
<i class="fas fa-expand" style="font-size: 20px; color: white;"></i>
</button>
</div>
</div>
I tried changing the div its contained in and nothing worked.
Related
I have the left & right columns, I want the image to be responsive when I minimize the screen & by default both left & right should cover the whole screen. when I minimize the screen the right image becomes small & when I check on the mobile device the left column is covering 80% of the screen. Please help me to fix the responsive image & what I'm missing. Below is my code.
div.container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%
}
div.box {
position: relative;
box-sizing: border-box;
margin-bottom: 0;
width: 50%;
min-width: 300px;
}
* {
box-sizing: border-box;
outline: 0;
padding: 0;
margin: 0;
}
body {
margin: 0;
}
.col-left{
background: #efefef;
box-shadow: 16px 0px 26px rgba(0, 0, 0, 0.3);
width:50%;
height:auto;
}
.col-right{
width:50%;
height:auto;
}
.col-right img {
width:100%;
height:auto;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
.container{
position:relative;
left:126px;
}
label {
display: inline-block;
max-width: 100%;
}
.container .main:after {
clear: both;
display: block;
content: '';
}
.main{
margin-left: 43px;
width: 547px;
height: 120px;
}
.content{
position:relative;
left: 126px;
margin-top:175px;
}
.text{
width: 547px;
height: 213px;
}
.title{
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-size: 36px;
line-height: 44px;
letter-spacing: 0.005em;
color: #FFFFFF;
}
.container{
margin-top:162px;
}
.author{
font-family: 'Inter-Regular';
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 33px;
color: #FFFFFF;
margin-top:48px;
}
#media only screen and (min-width: 638px) and (max-width: 1334px) {
.title{
font-size:33px;
}
}
#media only screen and (min-width: 638px) and (max-width: 1251px) {
.title{
font-size:32px;
}
}
#media only screen and (min-width: 638px) and (max-width: 1171px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 1130px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 1056px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 994px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 987px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 942px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 838px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 811px) {
.ls-title{
font-size: 18px;
width: 320px;
}
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 760px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 709px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 375px) and (max-width: 680px) {
.container .main:before {
width: 12px;
height: 64px;
}
.container{
left:40px;
}
.ls-logo-wrap{
left:40px;
}
.main{
margin-left:24px;
}
.content {
left: 40px;
margin-top: 43px;
}
.title{
font-size:18px;
width:280px;
line-height:28px;
}
.author{
margin-top:16px;
font-size:18px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-left box">
<div class="container">
<div class="main">
<label class="title">textheretextherertexthere</label>
</div>
</div>
<div class="content">
<div class="text">
<label class="title">textheretextheretextheretextheretextheretexthere</label>
</div>
</div>
</div>
<div class="col-right box">
<img src="http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg" />
</div>
</div>
This code snippet will help you to solve your problem! check it out If you need any help let me know :)
I have noticed you were using the same classes "title" inside two different fields maybe it can impact your styling sometimes :)
Also, you were using a lot of media queries which were not needed as I believe. You can learn more about RWD here :)
https://css-tricks.com/a-complete-guide-to-css-media-queries/
.container {
display: flex;
/* flex-direction: row;
height: min-content; */
}
.box {
position: relative;
box-sizing: border-box;
margin-bottom: 0;
}
* {
box-sizing: border-box;
outline: 0;
padding: 0;
margin: 0;
}
body {
margin: 0;
}
.col-left{
background: black;
box-shadow: 16px 0px 26px rgba(0, 0, 0, 0.3);
width:50%;
}
.col-right{
width:50%;
height:auto;
}
.col-right img {
width:100%;
height:auto;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
label {
display: inline-block;
max-width: 100%;
}
.container .main:after {
clear: both;
display: block;
content: '';
}
.main{
text-align: center;
height: 120px;
}
.text{
text-align: center;
height: 213px;
}
.title{
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-size: 36px;
line-height: 44px;
letter-spacing: 0.005em;
color: #FFFFFF;
overflow-wrap: break-word;
padding: 5px;
}
.author{
font-family: 'Inter-Regular';
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 33px;
color: #FFFFFF;
margin-top:48px;
}
#media (max-width: 800px)
{
.container{
flex-direction: column;
text-align: center;
align-items: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-left box">
<!-- here you have used the same class which is not a correct way to use -->
<div class="containers">
<div class="main">
<label class="title">textheretextherertexthere</label>
</div>
</div>
<div class="content">
<div class="text">
<label class="title">textheretextheretextheretextheretextheretexthere</label>
</div>
</div>
</div>
<div class="col-right box">
<img src="http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg" />
</div>
</div>
I'm using margins for my form but when I am testing the responsive layout the distance between the navigation bar increases if the screen width is a greater size. Therefore, I have also tried auto height but it still has a big gap between the navigation bar and the form.
I have also tried #media screen.
I had help yesterday with a similar problem to this, but now I'm encountering another one as its not with the footer but with the form itself.
I would kindly like to ask for help, and if you find a solution explain the changes so I can also learn from it! Kindest regards, Caelan : ).
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-top: -200px;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
margin-top:-250px;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
</div>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</[![section][1]][1]>
</div>
</body>
</html>
I analyzed your code. You have just to remove the height: 100vh from your .container.
The next step is to remove the margin-top: -250px from your .form1. then it should look good.
Bonus Tip: the unit vh stands for viewport-height (browser height). so 100vh is 100% of the viewport height.
I am stuck with responsive, to be more precise, with desktop screen of 1440px(90em).Does not really matter which size, but when I try to make it responsive(desktop), my tip calculator always looks somehow weird.I am not much experienced with CSS, thus these kind of problems occur every now and then.Anybody can check this project(code) and let some hints/tips go my way? :)
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Tip calculator app</title>
</head>
<body>
<div class="main__container">
<div class="logo">
<img src="./images/logo.svg" alt="logo" class="logo">
</div>
<div class="input__container">
<label for="bill"><span>Bill</span></label>
<input type="text" class="input__count">
<img src="./images/icon-dollar.svg" alt="person icon" class="img__dollar">
</div>
<div class="tip__container">
<h2>Select Tip %</h2>
<div class="tip__numbers">
<span>5%</span>
<span>10%</span>
<span>15%</span>
<span>25%</span>
<span>50%</span>
<input placeholder="Custom">Custom</input>
</div>
</div>
<div class="result">
<span>Number of people</span>
<span class="error__info">Can't be zero</span>
<img src="./images/icon-person.svg" alt="person icon" class="img__person">
<input type="text" class="input__people">
<div class="result__numbers">
<div class="result__numbers__container">
<span class="text__white">Tip Amount</span>
<span class="text__cyan">/ person</span>
</div>
<div class="result__tip__number">
<span>$0.00</span>
</div>
<div class="result__numbers__container">
<span class="text__white">Total</span>
<span class="text__cyan">/ person</span>
</div>
<div class="result__tip__number">
<span class="result__total__number">$0.00</span>
</div>
Reset
</div>
</div>
</div>
</body>
</html>
CSS code:
#import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght#400;700&display=swap');
:root {
--bg-color: rgba(184, 181, 181, 0.788);
--strong-cyan: hsl(172, 67%, 45%);
--very-dark-cyan: hsl(183, 100%, 15%);
--dark-grayish-cyan: hsl(186, 14%, 43%);
--dark-grayish-cyan-2: hsl(184, 14%, 56%);
--light-grayish-cyan: hsl(185, 41%, 84%);
--light-grayish-cyan-2: hsl(189, 41%, 97%);
--white: hsl(0, 0%, 100%);
--inp-font-size: 2.4em;
}
/* MOBILE FIRST DESIGN */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Mono', monospace;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.main__container {
background: hsl(185, 41%, 84%);
min-height: 90vh;
width: 20em;
/* !!! */
display: flex;
flex-direction: column;
align-items: center;
}
// #media (min-width: 90em) {
// .main__container {
// width: 100%;
// }
// }
.logo {
display: flex;
align-items: center;
justify-content: center;
padding-top: 2em;
}
.input__container,
.tip__container {
background: var(--white);
width: 100%;
}
.input__container {
height: 10vh;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
padding: 1.5em;
margin-top: 4.5em;
position: relative;
}
.input__container span {
display: block;
color: var(--very-dark-cyan);
font-weight: 700;
}
.input__count {
border: none;
outline: none;
background: var(--light-grayish-cyan-2);
width: 100%;
font-size: 2em;
border-radius: 10px;
padding-left: 3.5em;
cursor: pointer;
transition: all 200ms ease-in-out;
color: var(--very-dark-cyan);
font-weight: 700;
}
.input__count:hover,
.input__count:focus {
border: 3px solid var(--strong-cyan);
}
.input__container img {
position: absolute;
top: 60%;
left: 15%;
height: 20%;
}
.tip__container {
height: 20vh;
}
// #media (min-width: 90em) {
// .tip__container {
// display: flex;
// }
.tip__container h2 {
color: var(--very-dark-cyan);
font-weight: 700;
font-size: 1em;
padding: 2em 0em 1em 1.5em;
}
.tip__numbers {
padding: 1.5em;
display: grid;
grid-template-columns: 50% auto;
grid-template-rows: repeat(3, 2em);
gap: 0.5em;
}
.tip__numbers span {
background: var(--very-dark-cyan);
color: var(--white);
font-weight: 700;
border-radius: 5px;
text-align: center;
padding: 0.2em 0em;
cursor: pointer;
}
.tip__numbers span:hover {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.tip__numbers span:last-child {
background: var(--light-grayish-cyan-2);
color: var(--very-dark-cyan);
}
.tip__numbers span:nth-child(3) {
/* --> ACTIVE TIP PERCENTAGE <--*/
background: var(--strong-cyan);
color: var(--very-dark-cyan);
}
.tip__numbers input {
background: var(--light-grayish-cyan-2);
color: var(--very-dark-cyan);
font-weight: 700;
border: none;
outline: none;
text-align: center;
cursor: pointer;
transition: all 400ms ease-in-out;
}
.tip__numbers input:hover,
.tip__numbers input:focus {
border: 3px solid var(--strong-cyan);
border-radius: 5px;
}
input::placeholder {
padding-left: 0.5em;
font-size: 1.2em;
}
.result {
height: 50vh;
padding: 1.5em;
background: var(--white);
width: 100%;
position: relative;
}
.result > span {
color: var(--very-dark-cyan);
font-weight: 700;
display: inline;
margin-bottom: 1em;
font-size: 0.8em;
}
.result .error__info {
color: orange;
margin-left: 2.5em;
}
.input__people {
border: none;
outline: none;
background: var(--light-grayish-cyan-2);
color: var(--very-dark-cyan);
position: relative;
width: 100%;
font-size: 2em;
border-radius: 10px;
padding-left: 7.5em;
cursor: pointer;
font-weight: 700;
}
.img__person {
position: absolute;
z-index: 1;
top: 12%;
left: 16%;
}
.result__numbers {
background: var(--very-dark-cyan);
margin-top: 1.5em;
padding: 1.5em 1em;
width: 19em;
display: grid;
grid-template-columns: 50% auto;
grid-template-rows: 1fr 1fr;
}
.result__numbers__container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 7em;
margin-bottom: 1em;
}
.text__white {
color: var(--white);
}
.text__cyan {
color: var(--dark-grayish-cyan);
font-size: 0.6em;
letter-spacing: 2px;
font-weight: 700;
}
.result__tip__number {
margin-left: 4em;
color: var(--strong-cyan);
font-weight: 700;
font-size: 1.2em;
}
.btn__reset {
text-decoration: none;
text-transform: uppercase;
background: var(--strong-cyan);
color: var(--very-dark-cyan);
text-align: center;
font-weight: 700;
border-radius: 5px;
display: inline-block;
padding: 0.5em 2em;
width: 17em;
}
.btn__reset:hover {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
If you want a quick hint use media queries to adjust to smaller screens or for bigger screens
Like:
#media screen and (max-width: 992px){
//Here you put your css for everything less then 992px
}
#media screen and (max-width: 760px){
//Here you put your css for everything less then 760px
}
//etc.
or/and use percentage instead of strict sizes where it make sense
or/and use vw and vh instead of script sizes where it makes sense ("1vw" equals a 1 percent of screen size width, "1vh" is 1 percent of screen height)
or/and consider to use image instead of css for this calulator if it's just a n picture and doesn't do anything.
you can do like that every think betwen that screen size it's going to be re-style
dont use px to set the css (em,vh,%,rem)
#media screen and (min-width: 720px) and (max-width: 992px) {
}
#media screen and (min-width: 1px) and (max-width: 720px) {
}
I am trying to center my logo and search bar within my blue header. In my site I am using a section with a width of 1200px and inside the header there is also a "headersection" that is 1200px. I want the logo on the left side of this section and the searchbar in the middle. How can I accomplish this?
Live codepen: https://codepen.io/PHV/pen/dyvXGaa
My HTML:
<div class="usp-banner" role="complementary">
<ul class="uspBannerList">
<li class="uspBannerList">Vind de leukste en goedkoopste bordspellen op Spelplaats.com</li>
<li class="uspBannerList">Vergelijk prijzen bij verschillende aanbieders</li>
</ul>
</div>
<div class="header">
<div class="headersection">
<div class="logo">
<img src="img/Spelplaats-Logo-F.png" alt="Spelplaats.com" class="logo">
</div>
<script src="js/searchfunction.js"></script>
<div class="search">
<form action="search.html" method="get">
<label for="search" class="search"></label>
<input type="text" class="searchTerm" placeholder="Zoek spel" name="search">
</form>
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="topnav" id="myTopnav">
Strategie
Fantasy
Deductieve
Cooperatief
Familie
Kinder
Kaartspellen
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
My CSS:
html {
color: #ffffff;
font-size: 1em;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
/* No padding on the site*/
*,html,body,div,dl,dt,dd,ul,ol,li,h2,h3,h5,h6,pre,form,label,fieldset,input,blockquote,th,td {
margin: 0;
padding: 0;
}
article,aside,figure,footer,header,hgroup,nav,section {
display: block;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Site background */
body {
background: #ffffff;
color: #374147;
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.4;
margin: auto;
}
h2{
font: 16px "Open Sans",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-top: 3px;
margin-bottom: 5px;
}
h3 {
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-top: 3px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #eff7fa;
overflow: hidden;
text-align: center;
}
/* Style the links inside the navigation bar */
.topnav a {
display: inline-block;
color: #374147;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: rgb(0, 51, 109);
color: white;
}
.topnav input[type=text] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Styling of the section */
section{
max-width: 1200px;
min-height: 1000px;
margin-left: auto;
margin-right: auto;
}
.headersection{
max-width: 1200px;
max-height: 96px;
margin-left: auto;
margin-right: auto;
}
/* Styling of complementary banner */
.usp-banner {
display: block;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 3px;
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
line-height: 1.5rem;
color: #374147;
background: #fff;
height: 30px;
}
#media screen and (max-width: 600px) {
.usp-banner{
display: none;
}
}
#media screen and (max-width: 768px) {
.usp-banner{
display: none;
}
}
.uspBannerList ul{
margin-left: 0;
padding-left: 0;
}
.uspBannerList li{
list-style-type: none;
margin-right: 2.5%;
margin-left: 2.5%;
width: 45%;
float: left;
height: auto;
}
/*Styling of searchbar */
.search {
width: 35%;
position: relative;
display: flex;
left: 12%;
margin: auto;
}
#media screen and (max-width: 600px) {
.search{
width: 50%;
}
}
#media screen and (max-width: 768px) {
.search{
width: 60%;
}
}
.searchTerm {
width: 300px;
border: 3px solid #fff;
border-right: none;
padding: 5px;
height: 36px;
border-radius: 5px 0 0 5px;
outline: none;
color: #374147;
}
#media screen and (max-width: 600px) {
.searchTerm{
width: 100px;
}
}
.searchTerm:focus{
color: #374147;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #fff;
background: #57bdfc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Styling of the header */
.header {
padding: 35px;
text-align: center;
background: #57bdfc;
color: white;
}
.logo {
height: 96px;
float: left;
position: relative;
}
#media screen and (max-width: 600px) {
.logo{
margin-left: 5px;
}
}
#media screen and (max-width: 768px) {
.logo{
margin-left: 5px;
}
}
Update these css
.headersection {
max-width: 1200px;
max-height: 96px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.search {
display: flex;
}
if you want to have padding for the header and the height of .headersection be limit
you should set position absolute for .logo as below:
.logo { position: absolute; top: 0; bottom: 0; margin: auto}
and set position relative for .header.
but this is not good practice.
you can easily use this code for better result :
.header {
display: flex;
align-items: center;
}
remove .headersection because there is no need
this might be helpful
.logo {
height: 96px;
float: left;
position: relative;
margin-top: -15px; <--- adjust according to your need..
}
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>