diff --git a/src/components/Chat/Chat.css b/src/components/Chat/Chat.css index 7edb694..53bc5c8 100644 --- a/src/components/Chat/Chat.css +++ b/src/components/Chat/Chat.css @@ -63,4 +63,16 @@ #nickname { max-width: 8.4em; } +} +@media screen and (max-height: 300px) { + .see-message-btn, + .enter + { + max-width:15em; + } + + #nickname { + max-width: 8.4em; + font-size: .9em; + } } \ No newline at end of file diff --git a/src/components/RoomOne/RoomOne.css b/src/components/RoomOne/RoomOne.css index a8ed8fc..32eda10 100644 --- a/src/components/RoomOne/RoomOne.css +++ b/src/components/RoomOne/RoomOne.css @@ -178,28 +178,74 @@ } } -@media screen and (max-width: 768px) { +@media screen and (max-height: 585px) { + .board { + width: 80%; + } + .lamp { + width: 110%; + } + .radio { + width: 70% + } + .door { + width: 60%; + } +} + +@media screen and (max-height: 480px) { .room { - padding: 0rem; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(3, 1fr); + grid-template-areas: + 'clock board board board lamp' + 'bike door door desk radio' + 'plant door door desk radio '; + } + .board { + width: 70%; } - .alpha-centauri { - padding-left: 1rem; + .radio { + margin-bottom: 0rem; } + .door { + width: 50%; + } +} - .board, + +@media screen and (max-width: 768px) { + + .room { + padding: 0rem; + } + .clock, - .radio, .plant, .bike { width: 90%; } - .deskComp { + .desk-comp { width: 50%; } + +} + +@media screen and (max-height: 300px) { + .board { + margin-top: .5rem; + width: 60%; + } .lamp { - width: 140%; + width: 85%; + } + .radio { + width: 60% + } + .alpha-centauri { + margin-bottom: 4rem; } }