mobile layout fixes
This commit is contained in:
G14
parent
41f09e43d5
commit
1a8d4c8f75
|
|
@ -222,6 +222,7 @@ input[type=email] {
|
|||
background-position: center;
|
||||
background-size: 24px;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -10000px;
|
||||
cursor: pointer; }
|
||||
|
||||
.section-heading {
|
||||
|
|
@ -680,6 +681,13 @@ input[type=email] {
|
|||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px; }
|
||||
.section-heading-even p:last-child {
|
||||
position: absolute;
|
||||
left: 65%;
|
||||
margin-top: 30px; }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.section-heading-even p:last-child {
|
||||
position: static; } }
|
||||
|
||||
.block-square {
|
||||
display: inline-block;
|
||||
|
|
@ -724,7 +732,7 @@ input[type=email] {
|
|||
|
||||
.mobile-block-square {
|
||||
display: inline-block;
|
||||
margin-top: 60px;
|
||||
margin-top: 30px;
|
||||
padding: 25px 20px;
|
||||
width: 160px;
|
||||
height: 210px;
|
||||
|
|
@ -1140,6 +1148,9 @@ footer {
|
|||
.hashtag {
|
||||
color: #7099e6; }
|
||||
|
||||
.section-row {
|
||||
display: none; }
|
||||
|
||||
/* Import Libs SASS/CSS */
|
||||
/**
|
||||
* Swiper 3.3.1
|
||||
|
|
@ -1206,8 +1217,9 @@ footer {
|
|||
.swiper-slide {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative; }
|
||||
|
|
@ -1676,15 +1688,11 @@ body input:required:valid, body textarea:required:valid {
|
|||
/* ALWAYS END */
|
||||
/*========== Desktop First Method ========== */
|
||||
/* Large Devices, Wide Screens */
|
||||
@media only screen and (max-width: 1200px) {
|
||||
/* */ }
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
@media only screen and (max-width: 992px) {
|
||||
/* */ }
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
@media only screen and (max-width: 768px) {
|
||||
.table-center {
|
||||
overflow: hidden; }
|
||||
.table-left, .table-right {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
|
|
@ -1713,7 +1721,10 @@ body input:required:valid, body textarea:required:valid {
|
|||
margin: 0 auto;
|
||||
margin-bottom: 20px; }
|
||||
.mobile-hidden {
|
||||
display: none; } }
|
||||
display: none; }
|
||||
.section-row {
|
||||
display: block;
|
||||
border-bottom: 1px solid #ddd; } }
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
|
@ -1745,29 +1756,42 @@ body input:required:valid, body textarea:required:valid {
|
|||
.footer-logo-mobile {
|
||||
display: block; }
|
||||
.section-heading-odd {
|
||||
margin-left: 0; } }
|
||||
margin-left: 0; }
|
||||
.tags {
|
||||
-webkit-transform: scale(0.8);
|
||||
-ms-transform: scale(0.8);
|
||||
transform: scale(0.8); } }
|
||||
|
||||
/* Custom, iPhone Retina */
|
||||
@media only screen and (max-width: 320px) {
|
||||
/* */ }
|
||||
.status-email, .status-text {
|
||||
width: 320px; }
|
||||
.status-email > h1, .status-text > h1 {
|
||||
font-size: 20px; }
|
||||
.status-email > p, .status-text > p {
|
||||
padding: 0 15px; }
|
||||
.mobile-slider {
|
||||
width: 320px; }
|
||||
.section-heading-even, .section-heading-odd {
|
||||
width: 320px; }
|
||||
.section-heading-even > h2, .section-heading-odd > h2 {
|
||||
font-size: 18px; }
|
||||
.section-heading-even > p, .section-heading-odd > p {
|
||||
padding: 0 15px; }
|
||||
.tags {
|
||||
left: -10px; }
|
||||
.gradient-email, .gradient-text {
|
||||
width: 320px; }
|
||||
.gradient-email h2, .gradient-text h2 {
|
||||
font-size: 20px; }
|
||||
.section-gradient .section-gradient-text {
|
||||
width: 320px; }
|
||||
.section-gradient .section-gradient-text p {
|
||||
font-weight: normal; } }
|
||||
|
||||
/*========== Mobile First Method ========== */
|
||||
/* Custom, iPhone Retina */
|
||||
@media only screen and (min-width: 320px) {
|
||||
/* */ }
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
@media only screen and (min-width: 480px) {
|
||||
/* */ }
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
@media only screen and (min-width: 768px) {
|
||||
/* */ }
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
@media only screen and (min-width: 992px) {
|
||||
/* */ }
|
||||
|
||||
/* Large Devices, Wide Screens */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
/* */ }
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#features">Features</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
|
||||
</ul>
|
||||
|
|
@ -104,8 +104,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-row">
|
||||
<div class="table-row mobile-hidden">
|
||||
<div class="block block-white">
|
||||
<div class="block1-icon">
|
||||
</div>
|
||||
|
|
@ -117,7 +116,6 @@
|
|||
</div>
|
||||
<h3>Browse Decentralised Apps</h3>
|
||||
<p>Explore the next generation of apps, with the next generation of Browser.</p>
|
||||
</p>
|
||||
</div>
|
||||
<div class="block block-white">
|
||||
<div class="block3-icon">
|
||||
|
|
@ -129,6 +127,44 @@
|
|||
|
||||
</section>
|
||||
|
||||
<!-- Mobile Table-Row -->
|
||||
|
||||
<div class="section-row section-white">
|
||||
<div class="mobile-slider">
|
||||
<div class="swiper-container swiper1">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="mobile-block block-white">
|
||||
<div class="block1-icon">
|
||||
</div>
|
||||
<h3>Send, Receive, and Store Ether</h3>
|
||||
<p>Safely secure your Ether and other Ethereum crypto-assets.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="mobile-block block-white">
|
||||
<div class="block2-icon">
|
||||
</div>
|
||||
<h3>Browse Decentralised Apps</h3>
|
||||
<p>Explore the next generation of apps, with the next generation of Browser.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="mobile-block block-white">
|
||||
<div class="block3-icon">
|
||||
</div>
|
||||
<h3>Buy and Sell Ether Locally</h3>
|
||||
<p>Discover nearby Status users to exchange goods, services and ideas.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-one-third">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Colourful blocks section for mobile layout
|
||||
Remove or comment out if not needed
|
||||
|
|
@ -224,7 +260,7 @@
|
|||
<!-- End colourful blocks section for mobile view -->
|
||||
|
||||
|
||||
<section class="section-table section-white">
|
||||
<section id="features" class="section-table section-white">
|
||||
<div class="table-center">
|
||||
<div class="table-wrapper">
|
||||
|
||||
|
|
@ -417,8 +453,9 @@
|
|||
<div class="table-left">
|
||||
<div class="section-heading-even">
|
||||
<h2>Buy and sell Ether nearby</h2>
|
||||
<p>Find nearby Status users through our Discover feature. Exchange currency, services, and ideas to help grow the Ethereum community.<br><br>Sample Statuses:
|
||||
</p>
|
||||
<p>Find nearby Status users through our Discover feature. Exchange currency, services, and ideas to help grow the Ethereum community.</p>
|
||||
<p>Sample Statuses:</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@
|
|||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
.table-center {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-left, .table-right {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -69,6 +73,11 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
display: block;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
|
|
@ -130,12 +139,51 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
.tags {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Custom, iPhone Retina */
|
||||
|
||||
@media only screen and (max-width: 320px) {
|
||||
/* */
|
||||
.status-email, .status-text {
|
||||
width: 320px;
|
||||
> h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
> p {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
.mobile-slider {
|
||||
width: 320px;
|
||||
}
|
||||
.section-heading-even, .section-heading-odd {
|
||||
width: 320px;
|
||||
> h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
> p {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
.tags {
|
||||
left: -10px;
|
||||
}
|
||||
.gradient-email, .gradient-text {
|
||||
width: 320px;
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.section-gradient .section-gradient-text {
|
||||
width: 320px;
|
||||
p {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*========== Mobile First Method ========== */
|
||||
|
|
|
|||
|
|
@ -206,6 +206,7 @@ input[type=email] {
|
|||
background-position: center;
|
||||
background-size: 24px;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -10000px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -693,6 +694,14 @@ input[type=email] {
|
|||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
p:last-child {
|
||||
position: absolute;
|
||||
left: 65%;
|
||||
margin-top: 30px;
|
||||
@media only screen and (max-width: 768px) {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-square {
|
||||
|
|
@ -738,7 +747,7 @@ input[type=email] {
|
|||
|
||||
.mobile-block-square {
|
||||
display: inline-block;
|
||||
margin-top: 60px;
|
||||
margin-top: 30px;
|
||||
padding: 25px 20px;
|
||||
width: 160px;
|
||||
height: 210px;
|
||||
|
|
@ -1173,3 +1182,7 @@ footer {
|
|||
.hashtag {
|
||||
color: #7099e6;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue