responsiveness fix of hero section
MODIFY
WalletWasabi.Backend/wwwroot/css/style.css
WalletWasabi.Backend/wwwroot/css/style.css
@@ -200,7 +200,8 @@ section .shader {
.hero .hero-image {
position: relative;
- height: 100vh;
+ min-height: 100vh;
+ height: 100%;
width: 100%;
background-image: url("../images/hero-off.jpg");
background-size: cover;
@@ -370,8 +371,8 @@ section .shader {
}
}
-/* For > lg screens */
-@media (min-width: 992px) {
+/* For > lg screens with decent height */
+@media (min-width: 1200px) and (min-height: 840px) {
.features {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
@@ -379,6 +380,13 @@ section .shader {
}
}
+@media screen and (max-height: 900px) and (min-aspect-ratio: 2/1) {
+ .features {
+ -webkit-transform: translateY(0) !important;
+ border-radius: 6px;
+ }
+}
+
/* For < lg screens */
@media (max-width: 991px) {
h1, h2 {

MODIFY
WalletWasabi.Backend/wwwroot/index.html
WalletWasabi.Backend/wwwroot/index.html
<!-- Hero Section -->
<section class="hero">
- <div class="row align-items-center">
+ <div class="row row-eq-height">
<div class="col-12 col-sm-5">
<div class="hero-image">
<span class="text-lowercase mb-0 px-2 pb-5 mobile-heading d-sm-none">Unfairly Private</span>
</div>
</div>
- <div class="col-sm-7 col-xl-4 offset-xl-1">
- <div class="align-self-center px-2 py-4 p-lg-0 mb-2 mb-sm-0">
+ <div class="col-sm-7 col-xl-4 offset-xl-1 align-self-center">
+ <div class="px-2 py-4 pt-5 mb-2 mb-sm-0">
<h1 class="text-lowercase mb-lg-3 d-none d-sm-block mt-3 mt-lg-0">Reclaim your privacy now</h1>
<p class="mb-lg-3">Wasabi is an open-source, non-custodial, privacy-focused Bitcoin wallet, that implements trustless coin shuffling with mathematically provable anonymity - <a href="https://github.com/nopara73/ZeroLink/" target="_blank">Chaumian CoinJoin</a>.</p>

responsiveness fix of hero section