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; }
Related
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.
I have a button and if you hover on it a "popup" appears on the right. My problem is that I want to keep the space between the button and the popup. Sometimes it works but sometimes the div is not getting the correct property opacity:1; Does anyone have some tips on how to continue? http://jsfiddle.net/de8afuvr/
<div class="timer-container">
test
</div>
<div class="auto-update-container">
<span class="active" title="Refresh every 10 seconds">10s</span>
<span title="Refresh every 30 seconds">30s</span>
<span title="Refresh every minute">1m</span>
<span title="Refresh every 5 minutes">5m</span>
<span title="Refresh every 15 minutes">15m</span>
</div>
.map-toggles {
background-color: #fff;
border-radius: 2px;
bottom: 36px;
display: flex;
flex-direction: column-reverse;
left: 17px;
max-height: 42px;
overflow: hidden;
position: absolute;
transition: all 200ms linear;
z-index: 1;
&.open,
&:hover {
max-height: 600px;
overflow: visible;
box-shadow: 2px 5px 16px rgba(51, 51, 51, 0.2) !important;
border-radius: 7px;
}
.toggle {
align-items: center;
color: #465b67;
cursor: pointer;
display: flex;
flex: 0 0 auto;
font-size: 24px;
height: 42px;
justify-content: center;
position: relative;
width: 42px;
&.off {
background-color: #495054;
color: #869096;
background-color: transparent;
color: #c3d4de;
}
&.disabled {
box-shadow: none !important;
&::after {
content: '';
width: 3px;
height: 30px;
transform: rotate(45deg);
background-color: rgb(212, 87, 87);
position: absolute;
}
}
}
.toggle-autoupdate {
.auto-update-container {
align-items: center;
background-color: #fff;
display: flex;
flex-wrap: wrap;
height: auto;
justify-content: center;
left: 42px;
opacity: 0;
position: absolute;
pointer-events: none;
top: 0;
transition: all 200ms linear;
width: 70px;
background: #fff;
margin-left: 10px;
box-shadow: 2px 5px 16px rgba(51, 51, 51, 0.2);
border-radius: 7px;
>span {
align-items: center;
display: flex;
font-size: 1rem;
height: 42px;
justify-content: center;
width: 100%;
&:hover {
background-color: #456994;
color: #fff;
box-shadow: none !important;
}
&.active {
color: #fff;
background-color: #456994;
}
}
}
&:hover {
>.auto-update-container {
opacity: 1;
pointer-events: all;
}
}
&.disabled {
&:hover {
>.auto-update-container {
opacity: 0;
pointer-events: none;
}
}
}
}
}
.autoupdatediv {
margin-top: 100px;
bottom: auto;
top: 36px;
left: 20px;
padding: 1px;
}
Just add padding to this class this will work hopefully.
.timer-container: padding: 10px 15px;
Hey!
As you see in the picture I want to move the existing chatwindow to the right side where the red box is.
And I also need the box to change the height of itself when the window is made smaller.
The grid is from semantic.ui.
EDIT: On some request the whole css and parent html container is given. Hope this helps to solve the problem.
Thanks!
HTML:
<div class="two column doubling ui grid">
<div class="column">
<div class="ui segment">
1
</div>
</div>
<div class="computer only column">
<div class="chat_window">
<div class="top_menu">
<div class="buttons">
<div class="button maximize">
<h4 id="Online"></h4>
</div>
</div>
<div class="title">Chat</div>
</div>
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper"><input class="message_input" placeholder="Type your message!" /></div>
<div class="send_message">
<div class="text">Send</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="avatar"></div>
<div class="text_wrapper">
<div class="msgname"><a id="steamlink" target="_blank"><p id="msgname"></p></a></div>
<div class="text"></div>
</div>
</li>
</div>
</div>
</div>
CSS:
.chat_window {
width: 100%;
max-width: 450px;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
background-color: #f8f8f8;
overflow: hidden;
}
.top_menu {
background-color: #fff;
width: 100%;
padding: 20px 0 15px;
box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
}
.top_menu .buttons {
margin: 3px 0 0 20px;
position: absolute;
}
.top_menu .buttons .button {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
position: relative;
}
.top_menu .buttons .button.close {
background-color: #f5886e;
}
.top_menu .buttons .button.minimize {
background-color: #fdbf68;
}
.top_menu .buttons .button.maximize {
background-color: #a3d063;
}
.top_menu .title {
text-align: center;
color: #bcbdc0;
font-size: 20px;
}
#Online{
margin: 0 0 0 20px;
color: #bcbdc0;
}
.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 600px;
overflow-y: scroll;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 10px;
transition: all 0.5s linear;
opacity: 0;
}
.messages .message.left .avatar {
background-size: 100%;
float: left;
}
.messages .message.left .text_wrapper {
background-color: #DFDFDF;
margin-left: 20px;
}
.messages .message .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
}
.messages .message .msgname {
font-weight: bold;
}
.messages .message .text_wrapper {
display: inline-block;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 6px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper .text {
font-size: 14px;
font-weight: 250;
}
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 10px 10px;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border-radius: 5px;
border: 1px solid #bcbdc0;
width: calc(100% - 100px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 90px;
height: 50px;
display: inline-block;
border-radius: 5px;
background-color: #563D7C;
color: #fff;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
Picture:
Click here
So i am trying to change the element of a different div using the :hover effect in CSS.
If you check my code you should understand what I am trying to accomplish.
When you hover over the project button i would like the slider-container to have the text 'projects' and so on for all of the buttons
I understand that the button needs to be before the slider container which it is, so i really don't understand why this is not working?
If anybody could either direct me to a better tutorial on using this hover effect and help me understand what the issue is i would be really appreciative.
Thanks Guys! :)
#content {
position: relative;
overflow: hidden;
width: 900px;
height: 440px;
background: #D5D5D5;
margin: auto;
top: 50px; left: 0; bottom: 0; right: 0;
-webkit-box-shadow: 0px 0px 23px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 23px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 23px 3px rgba(0,0,0,0.75);
}
.logo-container{
display: flex;
flex-direction: row;
position: relative;
width: 100%;
height: 100px;
justify-content: center;
margin: auto;
float: right;
top: 0px;
}
.blockicon {
position: relative;
width: 50px;
height: 50px;
top: 15px;
border-radius: 50%;
border: solid 5px black;
cursor: pointer;
font-size: 30px;
text-align: center;
vertical-align: middle;
line-height: 50px;
margin: 0 0.8%;
}
.projects {
background: #801113;
}
.projects:hover > .slider-container {
background: #801113;
}
.projects:hover > .slider-container:before {
content:"Projects";
}
.aboutme {
background: #1A8305;
}
.aboutme:hover > .slider-container {
background: #1A8305;
}
.aboutme:hover > .slider-container:before {
content:"About Me";
}
.contactme {
background: #E8BA1A;
}
.contactme:hover > .slider-container {
background: #E8BA1A;
}
.contactme:hover > .slider-container:before {
content:"Contact Me";
}
.helped {
background: #0049BB;
}
.helped:hover > .slider-container {
background: #0049BB;
}
.helped:hover > .slider-container:before {
content:"Helped";
}
.hobbys {
background: #A40CA3;
}
.hobbys:hover > .slider-container {
background: #A40CA3;
}
.hobbys:hover > .slider-container:before {
content:"Hobbys";
}
.slider-container {
position:absolute;
background: #CF4000;
width: 95%;
height: 320px;
margin: auto;
top: 400px; left: 0; bottom: 0; right: 0;
}
.slider-container:before {
position:absolute;
content:"Test";
font-size: 30px;
bottom: 20%;
left: 40%;
font-family: Aldrich;
padding: 0;
font-weight: bold;
color: white;
z-index: 999;
}
#media screen and (max-width: 900px) {
#content {
width: 100%;
}
#content-container {
width: 100%;
}
#footer {
width: 100%;
}
}
<div id="content">
<div class="logo-container">
<div class="blockicon projects"> P </div>
<div class="blockicon aboutme"> A </div>
<div class="blockicon contactme"> C </div>
<div class="blockicon helped"> H </div>
<div class="blockicon hobbys"> H </div>
<div class="slider-container">
</div>
</div>
</div>
Just use the general sibling combinator ~ and it will work.
#content {
position: relative;
overflow: hidden;
width: 900px;
height: 440px;
background: #D5D5D5;
margin: auto;
top: 210px;
left: 0;
bottom: 0;
right: 0;
-webkit-box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.75);
}
.logo-container {
display: flex;
flex-direction: row;
position: relative;
width: 100%;
height: 100px;
justify-content: center;
margin: auto;
float: right;
top: 0px;
}
.blockicon {
position: relative;
width: 50px;
height: 50px;
top: 15px;
border-radius: 50%;
border: solid 5px black;
cursor: pointer;
font-size: 30px;
text-align: center;
vertical-align: middle;
line-height: 50px;
margin: 0 0.8%;
}
.projects {
background: #801113;
}
.projects:hover ~ .slider-container {
background: #801113;
}
.projects:hover ~ .slider-container:before {
content: "Projects";
}
.aboutme {
background: #1A8305;
}
.aboutme:hover ~ .slider-container {
background: #1A8305;
}
.aboutme:hover ~ .slider-container:before {
content: "About Me";
}
.contactme {
background: #E8BA1A;
}
.contactme:hover ~ .slider-container {
background: #E8BA1A;
}
.contactme:hover ~ .slider-container:before {
content: "Contact Me";
}
.helped {
background: #0049BB;
}
.helped:hover ~ .slider-container {
background: #0049BB;
}
.helped:hover ~ .slider-container:before {
content: "Helped";
}
.hobbys {
background: #A40CA3;
}
.hobbys:hover ~ .slider-container {
background: #A40CA3;
}
.hobbys:hover ~ .slider-container:before {
content: "Hobbys";
}
.slider-container {
position: absolute;
background: #CF4000;
width: 95%;
height: 320px;
margin: auto;
top: 400px;
left: 0;
bottom: 0;
right: 0;
}
.slider-container:before {
position: absolute;
content: "Test";
font-size: 30px;
bottom: 20%;
left: 40%;
font-family: Aldrich;
padding: 0;
font-weight: bold;
color: white;
z-index: 999;
}
#media screen and (max-width: 900px) {
#content {
width: 100%;
}
#content-container {
width: 100%;
}
#footer {
width: 100%;
}
}
<div id="content">
<div class="logo-container">
<div class="blockicon projects">P</div>
<div class="blockicon aboutme">A</div>
<div class="blockicon contactme">C</div>
<div class="blockicon helped">H</div>
<div class="blockicon hobbys">H</div>
<div class="slider-container">
</div>
</div>
</div>
see here : jsfiddle
( changed only for .projects )
> means directly the element inside it's parent. for eg : parent > child.
for elements that are siblings like .projects and .slider-container use ~
for eg :
.projects:hover ~ .slider-container {
background: #801113;
}
.projects:hover ~ .slider-container:before {
content:"Projects";
}
I made a modal and it does not do the transition effect when I apply a background-color to my #main div which contains all the content, after removing the background the modal does do the transition effect and disappears slowly.
To ge the modal just click on register on the top navbar.
Live demo for the modal along with the background-color on #main:
http://79.179.201.217/
Live demo for the modal long without the background-color on #main:
http://79.179.201.217/test.php
Just to note that the following under #main causes the issue.
background-color: #eee;
CSS:
#main {
width: 85%;
max-width: 875px;
margin: 70px auto;
border-radius: 5px;
padding: 15px;
z-index: -600;
background-color: #eee;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: -500;
transition: opacity 0.18s linear, transform 0.18s linear;
transform: scale(1.4);
opacity: 0;
}
.modal-close {
display: block;
color: #555;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
position: absolute;
top: 6px;
right: 20px;
}
.modal-content {
display: block;
margin-top: 10px;
}
.modal-container {
display: table;
margin: 220px auto;
position: relative;
border: 1px solid #eee;
background-color: #eee;
padding: 25px;
border-radius: 3px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);
}
.modal-container.x2 {
width: 80%;
max-width: 200px;
}
.modal-container.x3 {
width: 80%;
max-width: 300px;
}
.modal-container.x4 {
width: 80%;
max-width: 400px;
}
.modal-container.x5 {
width: 80%;
max-width: 500px;
}
.modal-container.x6 {
width: 80%;
max-width: 600px;
}
.modal-container.x7 {
width: 80%;
max-width: 700px;
}
.modal-container.x8 {
width: 80%;
max-width: 800px;
}
.modal-header {
margin-bottom: 20px;
border-bottom: 1px solid gray;
font-size: 18px;
color: #555555;
font-weight: 500;
text-transform: uppercase;
}
.modal.modal-visible {
opacity: 1;
z-index: 1000000;
transform: scale(1.0);
}