Got things looking nice on mobile!

This commit is contained in:
Robbie Antenesse 2016-07-06 12:44:02 -06:00
parent a2cb7d5180
commit 1e82cd2745
3 changed files with 36 additions and 21 deletions

View File

@ -90,9 +90,8 @@ input, textarea, select, option {
background: #c0c088;
}
#dictionaryContent {
#dictionaryColumn {
background: #bd7251;
padding: 15px;
border: none;
-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);

View File

@ -21,6 +21,7 @@ and (max-device-width : 910px) {
#leftColumn {
width: 100%;
margin: 0;
}
#wordEntryForm {
@ -28,9 +29,6 @@ and (max-device-width : 910px) {
width: 100%;
max-width: 450px;
margin: 10px auto;
-webkit-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important;
-moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important;
box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important;
}
#wordEntryForm label {
@ -66,18 +64,30 @@ and (max-device-width : 910px) {
margin: 0px auto;
}
#dictionaryContent {
#dictionaryColumn {
width: 100%;
margin: 0;
padding: 0;
}
#dictionaryContent {
margin: 0 auto;
padding: 15px;
}
#dictionaryContent {
padding: 15px;
#dictionaryDescription {
margin: 0 auto;
}
#dictionaryDescription {
margin: 0;
#searchFilterArea {
width: 90%;
min-width: 200px;
padding: 10px 10px 3px;
margin: 0 auto;
}
entry {
margin: 0 auto 5px;
}
#formLockButton {

View File

@ -1,3 +1,9 @@
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
}
@ -72,6 +78,8 @@ td:last-child, th:last-child {
#leftColumn {
float: left;
width: 30%;
margin: 15px 0 15px 15px;
}
form {
@ -79,11 +87,8 @@ form {
}
#wordEntryForm {
width: 30%;
max-width: 400px;
min-width: 260px;
margin: 15px 0 15px 15px;
border: outset 3px;
}
.wbr:after {
@ -122,8 +127,8 @@ input[type=checkbox] {
}
.longDefinition {
width: 80%;
min-width: 260px;
width: 100%;
min-width: 230px;
height: 150px;
}
@ -175,16 +180,18 @@ input[type=checkbox] {
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
}
#dictionaryContainer {
#dictionaryColumn {
width: 60%;
margin: 15px 0 36px 15px; /* bottom margin must clear footer */
padding: 0;
float: left;
}
#dictionaryContent {
width: 60%;
width: 100%;
min-width: 260px;
max-width: 800px;
padding: 15px;
}
#dictionaryName {
@ -253,7 +260,6 @@ entry {
width: 90%;
min-width: 200px;
padding: 10px 10px 3px;
border: outset 3px;
margin-bottom: 5px;
}
@ -372,10 +378,10 @@ searchTerm {
#settingsOptions, #infoPage, #loadAfterDeletePage,
#accountSettingsPage, #fullScreenTextboxPage {
position: fixed;
top: 6%;
top: 5%;
left: 6%;
right: 6%;
bottom: 6%;
bottom: 10%;
min-width: 260px;
min-height: 260px;
padding: 5px 5% 5%;
@ -434,7 +440,7 @@ searchTerm {
clear: both;
}
#settingsSaveButtons {
position: fixed;
position: absolute;
right: 10%;
bottom: 8%;
font-size: 14px;