basic layout for 768px

This commit is contained in:
G14 2016-06-21 19:06:32 +05:00
parent 2b4716bd09
commit bbf2f48b21
2 changed files with 80 additions and 33 deletions

View File

@ -1166,20 +1166,37 @@ body input:required:valid, body textarea:required:valid {
/* Medium Devices, Desktops */
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
/*Disable Animation on Mobile Devices */
.animated {
-webkit-transition-property: none !important;
/*CSS transitions */
transition-property: none !important;
-webkit-transform: none !important;
-ms-transform: none !important;
/*CSS transforms */
transform: none !important;
/*CSS animations */
-webkit-animation: none !important;
animation: none !important; } }
.table-left, .table-right {
display: block;
width: 100%; }
.header-wrapper {
overflow: visible; }
.phone-header {
top: 65px;
left: 45px; }
.phone-even {
display: none; }
.section-table {
height: 43vh; }
.table-one-third {
display: none; }
.table-two-third {
display: block;
width: 100%; } }
/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
.main-navigation {
display: none; }
.main-header {
margin-top: 20px; }
.logo-wrapper {
position: static; }
.main-logo {
left: 45%; }
.logo-shadow {
left: 42%; } }
/* Custom, iPhone Retina */
/*========== Mobile First Method ========== */
/* Custom, iPhone Retina */

View File

@ -15,34 +15,64 @@
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
/*Disable Animation on Mobile Devices */
.animated {
-webkit-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
/*CSS transitions */
-o-transition-property: none !important;
transition-property: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
/*CSS transforms */
-o-transform: none !important;
transform: none !important;
/*CSS animations */
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
-o-animation: none !important;
animation: none !important;
.table-left, .table-right {
display: block;
width: 100%;
}
.header-wrapper {
overflow: visible;
}
.phone-header {
top: 65px;
left: 45px;
}
.phone-even {
display: none;
}
.section-table {
height: 43vh;
}
.table-one-third {
display: none;
}
.table-two-third {
display: block;
width: 100%;
}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
/* */
.main-navigation {
display: none;
}
.main-header {
margin-top: 20px;
}
.logo-wrapper {
position: static;
}
.main-logo {
left: 45%;
}
.logo-shadow {
left: 42%;
}
}
/* Custom, iPhone Retina */