[website] Mobile fixes
padding fixes
MODIFY
WalletWasabi.Backend/wwwroot/about.html
WalletWasabi.Backend/wwwroot/about.html
<h3>Get started in 3 simple steps</h3>
</div>
<div class="row text-center p-100">
- <div class="col-md-4">
+ <div class="col-md-4 my-4">
<div class="icon-big mx-auto">
<img src="img/downloadww.svg">
</div>
<strong>1. Download Wasabi Wallet</strong>
</p>
</div>
- <div class="col-md-4">
+ <div class="col-md-4 my-4">
<div class="icon-big mx-auto">
<img src="img/createnewwallet.svg">
</div>
<strong>2. Create a new wallet</strong>
</p>
</div>
- <div class="col-md-4">
+ <div class="col-md-4 my-4">
<div class="icon-big mx-auto">
<img src="img/coinjoin.svg">
</div>

MODIFY
WalletWasabi.Backend/wwwroot/css/style.css
WalletWasabi.Backend/wwwroot/css/style.css
@@ -950,6 +950,9 @@ hr {
.m-100 {
margin: 100px 0;
}
+.card label {
+ width: calc(100% - 30px);
+}
@media (min-width: 576px) {
body {
--breakpoint: 540px;
@@ -1030,7 +1033,7 @@ hr {
}
.fixed-img img {
object-fit: cover;
- height: 60vh;
+ height: 100vh;
}
.dropdown-menu {
background: transparent;
@@ -1068,7 +1071,7 @@ hr {
margin: 20px 0;
}
.p-100 {
- padding: 40px;
+ padding: 40px 0;
}
.p-200 {
padding: 40px 0;
@@ -1079,6 +1082,9 @@ hr {
.floating-title {
font-size: 60px;
}
+ .card label {
+ font-size: 14px;
+ }
}
@media only screen and (max-width: 600px) {
.home-text-area h1 {
@@ -1136,6 +1142,13 @@ hr {
.timeline li:nth-child(odd):before {
right: calc(15% - 4px);
}
+ .timeline-title {
+ font-size: 16px;
+ margin-top: 10px;
+ }
+ .timeline-small-img {
+ height: 14px;
+ }
}
@media only screen and (max-width: 400px) {} @media only screen and (max-width: 320px) {
.home-text-area h1 {

MODIFY
WalletWasabi.Backend/wwwroot/faq.html
WalletWasabi.Backend/wwwroot/faq.html
<div class="col-md-8 offset-md-2">
<h1 class="text-center title-lined mb-5">FAQ</h1>
- <ul class="social-icons white-fill justify-content-md-center mb-5">
+ <ul class="social-icons white-fill justify-content-center mb-5">
<li>
<a href="https://twitter.com/wasabiwallet" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<h3>Get started in 3 simple steps</h3>
</div>
<div class="row text-center p-100">
- <div class="col-md-4">
+ <div class="col-md-4 my-4">
<div class="icon-big mx-auto">
<img src="img/downloadww.svg">
</div>
<strong>1. Download Wasabi Wallet</strong>
</p>
</div>
- <div class="col-md-4">
+ <div class="col-md-4 my-4">
<div class="icon-big mx-auto">
<img src="img/createnewwallet.svg">
</div>
<strong>2. Create a new wallet</strong>
</p>
</div>
- <div class="col-md-4">
+ <div class="col-md-4 my-4">
<div class="icon-big mx-auto">
<img src="img/coinjoin.svg">
</div>

MODIFY
WalletWasabi.Backend/wwwroot/index.html
WalletWasabi.Backend/wwwroot/index.html
</div>
</div>
<div class="row align-items-center p-100 m-100">
- <div class="col-md-5 position-relative">
+ <div class="col-md-5 position-relative order-2 order-md-1">
<img src="img/screenshots/webpage_ui_compilation-04.png" class="pull-img pull-img-to-left" />
</div>
- <div class="col-md-6 offset-md-1">
+ <div class="col-md-6 offset-md-1 order-1 order-md-2">
<ul class="feature-list">
<li>
<h2 class="title">Easy To Use</h2>

[website] Mobile fixes

padding fixes