Several mobile fixes
This commit is contained in:
parent
bb412622b0
commit
22e01769ca
|
@ -733,6 +733,9 @@ td {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 3rem; }
|
font-size: 3rem; }
|
||||||
|
@media only all and (max-width: 47.938em) {
|
||||||
|
.portfolio-modal .close-modal {
|
||||||
|
display: none; } }
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -748,6 +751,13 @@ td {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
text-align: center; }
|
text-align: center; }
|
||||||
|
@media only all and (max-width: 47.938em) {
|
||||||
|
.modal h1 {
|
||||||
|
margin-bottom: 0.5rem; }
|
||||||
|
.modal p, .modal ul {
|
||||||
|
margin: 1rem 0; }
|
||||||
|
.modal ul {
|
||||||
|
margin-top: 0; } }
|
||||||
.modal.in {
|
.modal.in {
|
||||||
opacity: 1; }
|
opacity: 1; }
|
||||||
.modal .client-details {
|
.modal .client-details {
|
||||||
|
@ -767,7 +777,10 @@ td {
|
||||||
width: 100%; } }
|
width: 100%; } }
|
||||||
@media only all and (max-width: 47.938em) {
|
@media only all and (max-width: 47.938em) {
|
||||||
.modal .modal-content {
|
.modal .modal-content {
|
||||||
|
margin-top: 0;
|
||||||
width: 100%; } }
|
width: 100%; } }
|
||||||
|
.modal .modal-content img {
|
||||||
|
max-height: 15rem; }
|
||||||
|
|
||||||
.blog-header {
|
.blog-header {
|
||||||
padding-top: 1rem !important;
|
padding-top: 1rem !important;
|
||||||
|
@ -1494,6 +1507,10 @@ ul.pagination {
|
||||||
padding-right: 14rem;
|
padding-right: 14rem;
|
||||||
background: #EEEEEE;
|
background: #EEEEEE;
|
||||||
padding-bottom: 2rem; }
|
padding-bottom: 2rem; }
|
||||||
|
@media only all and (max-width: 47.938em) {
|
||||||
|
.portfolio .notebooks .notebook-row {
|
||||||
|
margin-left: -10rem;
|
||||||
|
margin-right: -10rem; } }
|
||||||
.portfolio .notebooks .notebook-row .notebook {
|
.portfolio .notebooks .notebook-row .notebook {
|
||||||
min-width: 24%; }
|
min-width: 24%; }
|
||||||
@media only all and (min-width: 48em) and (max-width: 59.938em) {
|
@media only all and (min-width: 48em) and (max-width: 59.938em) {
|
||||||
|
@ -1503,6 +1520,10 @@ ul.pagination {
|
||||||
.portfolio .notebooks .notebook-row .notebook {
|
.portfolio .notebooks .notebook-row .notebook {
|
||||||
min-width: 24%;
|
min-width: 24%;
|
||||||
float: none; } }
|
float: none; } }
|
||||||
|
@media only all and (max-width: 30em) {
|
||||||
|
.portfolio .notebooks .notebook-row .notebook {
|
||||||
|
width: 170%;
|
||||||
|
margin-left: -4.7rem; } }
|
||||||
.portfolio .notebooks .notebook-row .notebook h4, .portfolio .notebooks .notebook-row .notebook .archive-list label, .archive-list .portfolio .notebooks .notebook-row .notebook label, .portfolio .notebooks .notebook-row .notebook .modular .bottom table th, .modular .bottom table .portfolio .notebooks .notebook-row .notebook th, .portfolio .notebooks .notebook-row .notebook .contact label, .contact .portfolio .notebooks .notebook-row .notebook label, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .portfolio .notebooks .notebook-row .notebook .name, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook .button, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook button {
|
.portfolio .notebooks .notebook-row .notebook h4, .portfolio .notebooks .notebook-row .notebook .archive-list label, .archive-list .portfolio .notebooks .notebook-row .notebook label, .portfolio .notebooks .notebook-row .notebook .modular .bottom table th, .modular .bottom table .portfolio .notebooks .notebook-row .notebook th, .portfolio .notebooks .notebook-row .notebook .contact label, .contact .portfolio .notebooks .notebook-row .notebook label, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .portfolio .notebooks .notebook-row .notebook .name, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook .button, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook button {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: 0; }
|
margin-bottom: 0; }
|
||||||
|
@ -1580,7 +1601,7 @@ ul.pagination {
|
||||||
@media only all and (max-width: 30em) {
|
@media only all and (max-width: 30em) {
|
||||||
.notebook {
|
.notebook {
|
||||||
width: 150%;
|
width: 150%;
|
||||||
margin-left: -3.8rem;
|
margin-left: -5.1rem;
|
||||||
float: none; } }
|
float: none; } }
|
||||||
|
|
||||||
.notebook .screen:before {
|
.notebook .screen:before {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -9,6 +9,9 @@
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
|
@include breakpoint(mobile-only) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.modal {
|
.modal {
|
||||||
@extend .default-animation;
|
@extend .default-animation;
|
||||||
|
@ -25,6 +28,17 @@
|
||||||
outline: 0;
|
outline: 0;
|
||||||
background: $white;
|
background: $white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@include breakpoint(mobile-only) {
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
p, ul {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
&.in {
|
&.in {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
@ -47,7 +61,11 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@include breakpoint(mobile-only) {
|
@include breakpoint(mobile-only) {
|
||||||
|
margin-top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
img {
|
||||||
|
max-height: 15rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -78,7 +78,7 @@
|
||||||
}
|
}
|
||||||
@include breakpoint(small-mobile-range) {
|
@include breakpoint(small-mobile-range) {
|
||||||
width: 150%;
|
width: 150%;
|
||||||
margin-left: -3.8rem;
|
margin-left: -5.1rem;
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -26,6 +26,12 @@ $image-margin: 2rem;
|
||||||
padding-right: $padding-horiz;
|
padding-right: $padding-horiz;
|
||||||
background: $text-bg;
|
background: $text-bg;
|
||||||
padding-bottom: 2rem;
|
padding-bottom: 2rem;
|
||||||
|
|
||||||
|
@include breakpoint(mobile-only) {
|
||||||
|
margin-left: -$padding-horiz + 4rem;
|
||||||
|
margin-right: -$padding-horiz + 4rem ;
|
||||||
|
}
|
||||||
|
|
||||||
.notebook {
|
.notebook {
|
||||||
min-width: 24%;
|
min-width: 24%;
|
||||||
@include breakpoint(tablet-range) {
|
@include breakpoint(tablet-range) {
|
||||||
|
@ -35,6 +41,10 @@ $image-margin: 2rem;
|
||||||
min-width: 24%;
|
min-width: 24%;
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
@include breakpoint(small-mobile-range) {
|
||||||
|
width: 170%;
|
||||||
|
margin-left: -4.7rem;
|
||||||
|
}
|
||||||
h4 {
|
h4 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
Loading…
Reference in New Issue