register-verification-sent.html - Improved responsiveness in mobile screens

This commit is contained in:
Matthew Patrick 2021-09-14 20:09:44 +07:00
parent 83ba1626f1
commit b300c49e9f

View file

@ -55,6 +55,50 @@
width: 70%; width: 70%;
height: 70%; height: 70%;
} }
@media screen and (max-width: 766px) {
.card h2 {
font-size: 7vw;
}
.card h5 {
font-size: 5vw;
}
}
@media screen and (min-width: 767px) {
.card h2 {
font-size: 4vw;
}
.card h5 {
font-size: 2vw;
}
}
@media screen and (min-width: 993px) {
.card h2 {
font-size: 3vw;
}
.card h5 {
font-size: 1.3vw;
}
}
@media screen and (min-width: 1400px) {
.card h2 {
font-size: 4vw;
}
.card h5 {
font-size: 2vw;
}
}
</style> </style>
</head> </head>
<body> <body>
@ -70,16 +114,23 @@
<br> <br>
<div class="card w-50"> <div class="container">
<div class="card-header" style="color: white;"> <div class="row">
<h2 style="font-size:3vw;">Verify Your Email Address</h2> <div class="col">
</div> <div class="card col-md-6 col-lg-6 col-xl-8">
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_IUWMcw.json" class="icon" background="transparent" <div class="card-header" style="color: white;">
speed="1" loop autoplay></lottie-player> <h2>Verify Your Email Address</h2>
<div class="card-body"> </div>
<h5 class="card-text" style="color: #dedede;font-size:1.5vw">Before proceeding, please check your email for a <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_IUWMcw.json" class="icon"
verification link background="transparent"
to verify your email address.</h5> speed="1" loop autoplay></lottie-player>
<div class="card-body">
<h5 class="card-text" style="color: #dedede;">Before proceeding, please check your email for a
verification link
to verify your email address.</h5>
</div>
</div>
</div>
</div> </div>
</div> </div>