franpcode/Hangman-game-with-React
1
0
Fork 0
mirror of https://github.com/FranP-code/Hangman-game-with-React.git synced 2025-10-13 00:42:32 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

responsive design done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-20 21:35:11 -03:00
parent 4765b26389
commit 3ec90bebaf
9 changed files with 154 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
public/css/index.css
View File

@@ -39,6 +39,29 @@ header h2 {
justify-content: space-between;
}
@media (max-width: 991.98px) {
.game-container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.game-container .column-1 {
order: 10;
}
.game-container .column-1 .hangman img {
width: 30vw;
}
.game-container .column-2 {
order: 0;
margin-bottom: 10vh;
display: flex;
flex-direction: column;
align-items: center;
}
}
/*@media (max-width: 576px) {
}*/
.hangman {
user-select: none;
}
@@ -74,6 +97,19 @@ header h2 {
margin-left: 3vw;
}
@media (max-width: 991.98px) {
.word .letter {
font-size: 10vw;
}
.word .counter {
align-self: flex-end;
}
}
@media (max-width: 576px) {
.word .counter {
font-size: 10vw;
}
}
.current-score {
display: flex;
flex-direction: row-reverse;
@@ -102,8 +138,6 @@ header h2 {
justify-content: space-around;
align-items: center;
box-sizing: border-box;
padding-top: 10vh;
padding-bottom: 10vh;
}
.categories-container .categories button, .categories-container .categories select {
height: 10vh;
@@ -250,7 +284,16 @@ header h2 {
margin-bottom: 0vh !important;
}
@media (max-width: 991.98px) {
.categories-container .categories {
padding: 0;
}
.categories-container .categories button, .categories-container .categories select {
font-size: 4vw !important;
}
}
.defeat, .victory {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
left: 0;
top: 0;
@@ -259,7 +302,7 @@ header h2 {
display: flex;
align-items: center;
justify-content: center;
font-size: 80pt;
font-size: 7vw;
background-color: rgba(0, 0, 0, 0.775);
user-select: none;
}
@@ -276,12 +319,20 @@ header h2 {
color: #58ff6b;
}
@media (max-width: 991.98px) {
.defeat, .victory {
height: 100%;
width: 100%;
}
}
.loading {
position: absolute;
left: 0;
top: 0;
width: 100vw;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background-color: #fff;
display: flex;
align-items: center;
@@ -293,7 +344,7 @@ header h2 {
}
.letters-registered {
margin: 0px 5vw;
padding: 0px 5vw;
display: flex;
align-items: center;
font-family: "Times New Roman", Times, serif;