When I resize the page the searchbox starts resizing after the padding of the parent if zero. I want to resize the div with class-"searchbox", with resizing the page not after the parent's padding is off. Here is the code I'll be glad if you correct me anywhere.
.site-wrapper {
max-width: 86.5rem;
min-height: 28rem;
padding: 0 4.3rem;
margin: 0 auto;
overflow: hidden;
}
.navbar {
display: flex;
justify-content: end;
padding-top: 2.7rem;
}
#hamburger-button {
position: relative;
width: 32px;
height: 32px;
border-radius: 4px;
cursor: pointer;
}
#hamburger-button:hover {
background-color: #0000001f;
}
#hamburger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
background-color: transparent;
background-image: url(/assets/menuicon.svg);
background-repeat: no-repeat;
background-size: contain;
padding: 9.2px;
margin: 0 auto;
cursor: pointer;
}
.header-content {
margin: 0 auto;
}
.header-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header-content-logo {
margin-top: 5rem;
margin-bottom: 2.3rem;
}
.header-content-logo svg {
width: 12.6rem;
}
.searchbox {
display: flex;
align-items: center;
border-radius: 6px;
width: 100%;
max-width: 38.7rem;
height: 2.7rem;
background-color: #fff;
box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.searchbox:hover {
box-shadow: 0px 6px 20px 6px rgba(0, 0, 0, 0.1);
}
.searchbox input {
width: 92%;
border: none;
background-color: transparent;
font-size: 11.8pt;
font-family: inherit;
padding-left: 1rem;
}
.searchbox input:focus {
outline: none;
}
<div class="site-wrapper">
<div class="navbar">
<div id="hamburger-button">
<button id="hamburger"></button>
</div>
</div>
<div class="header-content">
<div class="header-content-logo">
<svg>
</div>
<div class="searchbox">
<input type="text" placeholder="Search without being tracked">
</div>
</div>
</div>
I have tried putting margin and even making another div before it and putting padding but seems that it didn't make it work. I am out of options.
Related
I have implemented animation on a list. List should move horizontally on the screen. There is a div element for information i.e. waiting token.
List should not cross that div.
here goes my code:
.list_wrapper__content {
position: absolute;
top: 25%;
left: 0;
height: 5vh;
background-color: #fff;
animation: animate_opp_2 25s linear infinite;
display: flex;
margin-left: 10%;
}
.list_wrapper__content___item {
height: 5vh;
border: 1px solid red;
width: 200px;
margin-right: 1%;
text-align: center;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
color: grey;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
}
#keyframes animate_opp_2 {
0% {
left: 10;
transform: translate(20%);
}
100% {
left: 0;
transform: translate(-100%);
}
}
.header {
height: 140px;
width: 200px;
border: 1px solid black;
z-index: 3;
position: relative;
}
<div class="list_wrapper">
<div class="header"> Waiting Tokens</div>
<div class="list_wrapper__content">
<div class="list_wrapper__content___item" *ngFor="let item of ListItems">
{{item}}
</div>
</div>
</div>
Stackblitz for the same:
https://stackblitz.com/edit/angular-ivy-pvmjdz?file=src/app/app.component.css
Looks like I am missing something. Any help will be highly appreciated
Replace all list_wrapper__content___item with
<div class="list_wrapper__content___item" *ngFor="let item of ListItems">
{{item}}
</div>
.list_wrapper {
height: 60px;
display: flex;
background-color: grey;
overflow:hidden;
}
.header {
text-transform: uppercase;
min-width: 100px;
font-weight: bold;
border-right: 1px solid black;
display: flex;
align-items: center;
text-align: center;
background-color: white;
z-index:1
}
.list_wrapper__content {
animation: animate_opp_2 25s linear infinite;
display: flex;
align-items: center;
}
.list_wrapper__content___item {
height: 30px;
border: 1px solid red;
width: 200px;
margin-right: 1%;
border-radius: 2px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
color: grey;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
#keyframes animate_opp_2 {
0% {
left: 10;
transform: translate(20%);
}
100% {
left: 0;
transform: translate(-100%);
}
}
<div class="list_wrapper">
<div class="header"> Waiting Tokens</div>
<div class="list_wrapper__content">
<div class="list_wrapper__content___item">
1000
</div>
<div class="list_wrapper__content___item">
1001
</div>
<div class="list_wrapper__content___item">
1002
</div>
<div class="list_wrapper__content___item">
1003
</div>
<div class="list_wrapper__content___item">
1004
</div>
<div class="list_wrapper__content___item">
1005
</div>
<div class="list_wrapper__content___item">
1006
</div>
</div>
</div
you put an animation on your wrapper div, if you want to stop the animation right before
<div class="header"> Waiting Tokens</div>
you should put your animation on .list_wrapper__content___item
i slightly modified your css
.list_wrapper {
padding: 2rem;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.list_wrapper__content {
/* position: absolute; */
left: 0;
height: 250px;
background-color: #fff;
display: flex;
/* margin-left: 10%; */
position: relative;
overflow: hidden;
}
.list_wrapper__content___item {
height: 5vh;
border: 1px solid red;
width: 200px;
margin-right: 1%;
text-align: center;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
color: grey;
font-size: 30px;
font-weight: bold;
display: inline-flex;
justify-content: center;
animation: animate_opp_2 5s linear infinite;
}
working example:
https://angular-ivy-5egh19.stackblitz.io
I'm trying to adapt the images from the buttons (#but2, #but1) to their full height possible (in the div) and their corresponding width according to their height (width: auto).
I've tried with this code for the images from the buttons:
#but1 img, #but2 img{
height: 100%;
width: auto;
}
But I can't get the output I want. I share an image showing what's the output of that code and what's the output I want.
Thanks a lot for your help!
#but1 {
margin-left: auto;
margin-right: 5px;
background-color: transparent;
border: 0;
}
#but2 {
margin-left: 5px;
margin-right: auto;
background-color: transparent;
border: 0;
}
#but1 img,
#but2 img {
width: 100%;
height: auto;
}
.button-container {
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
#but-cont-2 {
margin-top: 25px;
background-color: #79b2f7;
position: relative;
}
#textarea {
width: 85%;
background-color: transparent;
border: 0;
height: 100%;
outline: none;
resize: none;
float: left;
}
.text {
width: 100%;
background-color: transparent;
float: right;
border: 0;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: right;
right: 21px;
}
<div>
<div class="button-container" id="but-cont-1">
<textarea id="textarea" name="prod"></textarea>
<button onclick="sub()" id="but1">
<img id="but1" src="https://cdn-icons-png.flaticon.com/512/861/861180.png" alt="">
</button>
</div>
<div class="button-container" id="but-cont-2">
<label id="cont" class="text"></label>
<button id="but2">
<img id="but2" src="https://cdn-icons-png.flaticon.com/128/1078/1078599.png" alt="">
</button>
</div>
</div>
Try using display: flex; for the button and try to resize the images with pixels like width: 20px; and height: auto; or verse versa, it should fix it.
Here is my idea of doing that: https://jsfiddle.net/L1ma5qrc/86/
*{
margin: 0;
padding: 0;
}
body{
padding: 20px
}
#but1 {
/* margin-right: 5px; */
/* background-color: transparent; */
border: 0;
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
border: 1px solid lightgray;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#but1:before {
content: "";
display: block;
background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
background-size: 50%;
background-position: center right;
height: 50px;
width: 50px;
margin-right: 16px;
margin-left: auto;
}
#but2 {
/* margin-right: 5px; */
/* background-color: transparent; */
border: 0;
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
border: 1px solid lightgray;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#but2:before {
content: "";
display: block;
background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
background-size: 50%;
background-position: center left;
height: 50px;
width: 50px;
margin-right: auto;
margin-left: 16px;
}
<div>
<div class="button-container" id="but-cont-1">
<button id="but1">
</button>
</div>
<div class="button-container" id="but-cont-2">
<button id="but2">
</button>
</div>
</div>
I think I'd look at applying the images as backgrounds. It cleans up the markup quite a bit and makes positioning easier.
Other tips:
Don't use floats for alignment. They're an outdated layout technique and have very few appropriate uses anymore.
Avoid absolute positioning when possible. It can also be troublesome.
Floats don't work with absolute positioning. Use one or the other if you must.
Rely less on IDs in your CSS. Ideally everything is class-based so it's reusable.
Consider not removing outlines. They're important for accessibility.
Avoid using label elements other than with form inputs. That would be nonstandard and also a possible accessibility issue.
.button-container {
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.button-container.alt {
margin-top: 25px;
background-color: #79b2f7;
}
.button-container button {
width: 100%;
height: 100%;
background-size: auto 60%;
background-position: 93% 50%;
background-repeat: no-repeat;
border: 0;
}
.button-container button.icon-recycle {
background-image: url("https://cdn-icons-png.flaticon.com/512/861/861180.png");
}
.button-container button.icon-trash {
background-image: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png");
background-position: 7% 50%;
}
#textarea {
position: absolute;
width: 85%;
background-color: transparent;
border: 0;
height: 100%;
outline: none;
resize: none;
}
.text {
width: 100%;
background-color: transparent;
border: 0;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: right;
right: 21px;
}
<div>
<div class="button-container">
<textarea id="textarea" name="prod"></textarea>
<button class="icon-recycle" onclick="sub()"></button>
</div>
<div class="button-container alt">
<span class="text"></span>
<button class="icon-trash"></button>
</div>
</div>
I am trying to achieve this [enter image description here][1]
[1]: (https://i.stack.imgur.com/4ZOBB.jpg), i have managed to make it work on pc but its not looking same on mobile. Here code i have managed to create so far. box height should be less than of image. i have tried display:table but its also not working properly. please help. thank you.
body {
font-family: 'Abel', sans-serif;
}
.content-wrapper {
min-height: 100vh;
background-color: #d9dde2;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #f89b0f;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #f89b0f;
}
a {
color: #f39c12;
}
.content-header>.breadcrumb {
background: #f89b0f;
right: 25px;
border-radius: 25px;
color: #fff;
padding: 10px;
}
.modal-dialog {
z-index: 1200;
}
.solid-header-default {
background: #f0f0f0;
}
.solid-header-success {
background: #00a65a;
}
h2 {
font-size: 18px;
}
.gcircle {
height: 50px;
width: 50px;
background-color: #938005;
border-radius: 50%;
display: inline-block;
}
.circle-block {
text-align: center;
vertical-align: middle;
}
.circle {
background: #938005;
border-radius: 50%;
color: black;
display: inline-block;
height: 50px;
font-weight: bold;
font-size: 1.2em;
width: 50px;
margin: 0 auto;
}
.circle span {
display: table-cell;
vertical-align: middle;
height: 50px;
width: 50px;
text-align: center;
padding: 0 15px;
}
.c-chart {
display: inline-block;
vertical-align: top;
padding: 5px;
}
.brandlogo-image {
float: left;
line-height: .8;
margin-left: .8rem;
margin-right: .5rem;
margin-top: -6px;
max-height: 34px;
width: auto;
}
.dashboard-box {
max-width: 400px;
min-width: 150px;
background-color: #C43805 !important;
border-radius: 15px;
margin-left: 60px;
min-height: 50px;
max-height: 80px;
display: flex;
align-items: center;
}
.dash-img {
vertical-align: middle;
}
.inner {
display: inline-block;
}
<div class="dashboard-box" >
<img src="http://phiz.live/portal/assets/theme/img/c1.png" alt="Phiz.Live" style="margin-left:-70px;width:35%;" class="dash-img">
</div>
You can use Flexbox. what ever you want to center, you it inside .center1 and .center2 div. For more information. https://www.w3schools.com/css/css_align.asp
.dashboard-box {
max-width: 400px;
min-width: 150px;
background-color: #C43805 !important;
border-radius: 15px;
margin-left: 60px;
min-height: 50px;
max-height: 80px;
display: flex;
align-items: center;
}
.dash-img {
vertical-align: middle;
}
.center1 {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 500px;
background: steelblue;
}
.center2 {
width: 100%;
}
<div class="center1" >
<div class="center2">
<div class="dashboard-box" >
<img src="http://phiz.live/portal/assets/theme/img/c1.png" alt="Phiz.Live" style="margin-left:-70px;width:35%;" class="dash-img">
</div>
</div>
</div>
Think I got it working the way you want here: JSfiddle link, but I changed margin-left to -30px for the image and margin-left: 30px;for the .dashboard-box. Perhaps it can help you.
HTML
<div class="wrapper">
<div class="dashboard-box" >
<img src="http://phiz.live/portal/assets/theme/img/c1.png" alt="Phiz.Live" style="margin-left:-30px;width:35%;" class="dash-img">
</div>
</div>
CSS
.wrapper {
height: 20vh;
display: flex;
align-items: center;
}
.dashboard-box {
max-width: 400px;
min-width: 150px;
background-color: #C43805 !important;
border-radius: 15px;
margin-left: 30px;
min-height: 50px;
max-height: 80px;
display: flex;
align-items: center;
}
I have a horizontal bar that has 4 items or maybe more. What I am trying to do is that when the browser is resized each item of the horizontal bar with its respective element, however, I am using twitter-bootstrap 4, but it doesn't seem to work either by default
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
.flex7-child-1 {
height: 40%;
position: relative;
}
.flex7-child-1:before {
content: '';
position: absolute;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
background-size: contain;
top: -60px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-2:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 88px;
left: -170px;
right: 0;
margin: 24px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-3:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-4:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 170px;
right: 0;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-5:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 58px;
left: 166px;
right: -174px;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
<div class="post-content-wrapper">
<div class="flex flex7">
<div class="child flex7-child flex7-child-1"></div>
<div class="child flex7-child flex7-child-2"></div>
<div class="child flex7-child flex7-child-3"></div>
<div class="child flex7-child flex7-child-4"></div>
<div class="child flex7-child flex7-child-5"></div>
</div>
</div>
before toggle
after toggle, I am expecting to have the same position even when I resize the layout without breaking the elements
Here's a better way to achieve responsive consistent styles for your horizontal bars. Note that individual styles for each .flex7-child-#:before has been removed, and all .flex7-child elements now use flexbox.
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
/* Pay attention to below */
.flex7-child {
display: flex;
flex-direction: row;
justify-content: center;
}
.flex7-child:before {
content: '';
position: relative;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
top: -70px;
background-size: contain;
display: block;
width: 50px;
height: 50px;
}
/* Pay attention to above */
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-1 {
height: 40%;
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
This isn't an exact example, but I would wrap your thumbnails and bars together something like this:
#container{
margin: auto;
width: 800px;
height: 400px;
border: 3px solid gainsboro;
border-radius: 5px;
display: flex;
justify-content: space-around;
}
.flex-item{
height: 100%;
display: flex;
flex-direction: column-reverse;
}
.flex-item > .bar{
border-radius: 5px;
width: 80px;
background-color: mediumpurple;
border: 1px solid blue;
margin-top: 10px;
}
.flex-item:after{
display: block;
content: '';
height: 80px;
width: 80px;
background-image: url("https://via.placeholder.com/80.png")
}
<div id="container">
<div class="flex-item">
<div class="bar" style="height:40%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:20%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:60%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:50%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:70%"></div>
</div>
</div>
I am almost finish with building the skeleton of my simon game clone and the only left I want to do is set the container (which holds the game itself) to have a max height of 605px.
I was able to accomplish its width max when it reaches a certain threshold in the viewport but I am having hard time applying the same behavior but horizontally instead.
Any inputs will be greatly appreciated.
I've attached my code in CodePen as well:
http://codepen.io/neotriz/pen/RRxOJb
body {
background: skyblue;
font-family: 'Righteous', cursive;
box-sizing: border-box; }
.container {
width: 100%;
display: flex;
flex-wrap: wrap; }
.game {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 70vh;
margin-top: 10px; }
.button {
position: relative;
display: block;
height: 50%;
width: 50%;
margin-bottom: 1px; }
#green {
background: #39d565;
border-top-left-radius: 25%;
box-shadow: 0 6px 0 #0d934b;
bottom: 6px;
transition: all 0.1s linear; }
#green:active {
bottom: 0px;
box-shadow: 0px 0px 0px #0d934b; }
#red {
background: #d23a51;
border-top-right-radius: 25%;
box-shadow: 0 6px 0 #711515;
bottom: 6px;
transition: all 0.1s linear; }
#red:active {
bottom: 0px;
box-shadow: 0px 0px 0px #711515; }
#blue {
background: #09f;
border-bottom-left-radius: 25%;
box-shadow: 0 6px 0 #06c;
bottom: 6px;
transition: all 0.1s linear; }
#blue:active {
bottom: 0px;
box-shadow: 0px 0px 0px #06c; }
#yellow {
background: #FD9A01;
border-bottom-right-radius: 25%;
box-shadow: 0 6px 0 #916828;
bottom: 6px;
transition: all 0.1s linear; }
#yellow:active {
bottom: 0px;
box-shadow: 0px 0px 0px #916828; }
.score {
width: 100%;
height: 10vh;
text-align: center;
color: #FFF;
text-shadow: 1px 3px 2px black;
margin-bottom: 5px; }
.control-panel {
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
height: 15vh;
align-items: center;
justify-content: center;
background: #aaaaaa;
border-radius: 10px; }
.control-panel #on-off-btn {
width: 33.3333%; }
.control-panel #level {
width: 33.3333%; }
.control-panel #start {
width: 33.3333%; }
.control-panel p {
margin: 8px 0px 0px 0px; }
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden; }
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none; }
input.cmn-toggle-round + label {
padding: 2px;
max-width: 90%;
height: 35px;
background-color: #dddddd;
border-radius: 60px;
margin-top: 9px;
margin-left: 5px; }
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: ""; }
input.cmn-toggle-round + label:before {
right: 1px;
background-color: white;
border-radius: 60px;
transition: background 0.4s; }
input.cmn-toggle-round + label:after {
width: 38px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin-left 0.4s; }
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196; }
input.cmn-toggle-round:checked + label:after {
margin-left: 58%; }
.btn-round {
width: 50%;
height: 50px;
background: #ed2914;
border-radius: 100%;
outline: none;
box-shadow: 0 6px 0 #711515;
bottom: 6px;
transition: all 0.1s linear; }
.btn-round:active {
bottom: 0px;
box-shadow: 0px 0px 0px #711515; }
#media screen and (max-width: 311px) {
input.cmn-toggle-round:checked + label:after {
margin-left: 45%; } }
#media screen and (min-width: 426px) {
.container {
width: 426px;
margin-left: auto;
margin-right: auto; }
input.cmn-toggle-round:checked + label:after {
margin-left: 66%; } }
#media screen and (min-height: 605px) {
.container {
height: 605px; } }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simon Game FCC</title>
</head>
<body>
<div class="container">
<div class="game">
<div id="green" class="button"></div>
<div id="red" class="button"></div>
<div id="blue" class="button"></div>
<div id="yellow" class="button"></div>
</div>
<div class="score">
<h2>Score: 0 </h2>
</div>
<div class="control-panel">
<div id="on-off-btn">
<input id="on-off-slider"type="checkbox" class="cmn-toggle cmn-toggle-round">
<label for="on-off-slider"></label>
<p>Off/On</p>
</div>
<div id="level">
<input id="level-slider"type="checkbox" class="cmn-toggle cmn-toggle-round">
<label for="level-slider"></label>
<p>Level</p>
</div>
<div id="start">
<button class="btn-round"></button>
<p>(re)Start</p>
</div>
</div>
</div>
</body>
</html>
I think mixing vh heights and flex disposition is part of the problem because it makes the code a bit tricky to adjust. So I would suggest to remove all vh heights that are inside the container and replace them with a flex vertical positionning.
Here is the sccs I get (only the changed rules are here) :
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
height: 100vh;
flex-direction: column;
justify-content: center; }
.game {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 10px;
flex: 1 1 auto; }
.score {
width: 100%;
text-align: center;
color: #FFF;
text-shadow: 1px 3px 2px black;
margin-bottom: 5px;
flex: 0 0 auto; }
.control-panel {
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
align-items: center;
justify-content: center;
background: #aaaaaa;
border-radius: 10px;
flex: 0 0 auto; }