Commit 75ffbdef authored by mirree's avatar mirree
Browse files

Fixed layout for tablets

parent f74d8ed6
......@@ -2,10 +2,11 @@
/* Sorted in alphabethic order with tags first, then classes. At the end are media-queries. */
body{
background-color: mediumslateblue;
background-color: #d2cfe4;
display: flex;
justify-content: center;
overflow-y: scroll;
font-family: Georgia, 'Times New Roman', Times, serif, serif;
}
button{
......@@ -179,11 +180,11 @@ q{
width: 25vw;
flex-direction: column;
font-size: 16px;
border: #16199b dotted;
border: #0f106d dotted;
}
/* Source of sizes: https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
/* Source of first four sizes: https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
/* Large devices (laptops/desktops, between 992px and 1200px) */
@media only screen and (max-width: 1200px) {
.image{
......@@ -283,14 +284,14 @@ q{
}
}
/* Extra small devices (phones, between 300 px and 600px) */
/* Extra small devices (phones, between 410px and 600px) */
@media only screen and (max-width: 600px) {
button{
width: 25vw;
}
}
/* Even smaller devices (phones, 410 px and down) */
/* Even smaller devices (phones, 410px and down) */
@media only screen and (max-width: 410px) {
button{
font-size: 12px;
......@@ -312,4 +313,124 @@ q{
.sidebarCollection{
font-size: 13px;
}
}
/* Medium devices (portrait tablets, between 600px and 900px in width and between 800px and 1300px in height) */
@media only screen and (orientation: portrait) and (min-width: 600px) and (min-height: 800px){
body{
overflow-y: unset;
}
button{
font-size: 19px;
width: 25vw;
margin-bottom: 1vw;
padding: 1vw;
}
input[type=radio]{
width: 20px;
height: 20px;
margin-bottom: 1vw;
margin-top: 1vw;
}
.dot{
width: 35px;
height: 35px;
margin: 5px;
}
.header{
font-size: 42px;
}
.image{
width: 80vw;
height: 40vh;
}
.main{
width: 92vw;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border: none;
border-top: solid;
}
.navDots{
width: 100vw;
justify-content: space-evenly;
}
.prevBtn, .nextBtn{
width: auto;
padding: 3vw 2.5vw;
}
.radio{
width: 28vw;
padding-right: 2vw;
}
.screenBox{
padding: 0;
}
.sidebar{
display: flex;
padding-top: 65px;
}
.sidebarButtons{
flex-direction: row;
justify-content: center;
}
.sidebarCollection{
font-size: 20px;
}
.slideButtonContainer{
height: 70vh;
}
.sound{
width: 80vw;
margin-bottom: 50px;
}
.text{
width: 80vw;
font-size: 24px;
}
}
/* Medium devices (portrait tablets, 900px and up in width and 1300px and up in height) */
@media only screen and (orientation: portrait) and (min-width: 900px) and (min-height: 1300px){
button{
font-size: 27px;
}
.dot{
width: 50px;
height: 50px;
}
.header{
font-size: 55px;
}
.sidebar{
padding-top: 80px;
}
.sidebarCollection{
font-size: 28px;
}
.text{
font-size: 34px;
}
}
\ No newline at end of file
......@@ -55,7 +55,9 @@ class MiddlePart extends React.Component{
changeContent = () => {
let width = window.innerWidth;
if (width < 768) {
let height = window.innerHeight;
if (width < 768 || (width < height)) {
this.refs.SmallScreenBox.changeContentPB();
}
else{
......@@ -156,10 +158,11 @@ class MiddlePart extends React.Component{
render(){
let width = window.innerWidth;
let height = window.innerHeight;
/*
Either shows layout for smaller or larger screens based on width of window on screen.
*/
if (width < 768) {
if (width < 768 || (width < height)) {
return (
<div>
<Sidebar soundIndex={this.state.soundIndex}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment