Can anyone help me with reducing the space between the flex items in mobile view? I've tried using gap and margin in the flex items but haven't had any success. Here is my code for reference. Thank you!
https://i.sstatic.net/Bf5Va.png
I am trying to decrease the space between the app title, description, and login form specifically on mobile view. It looks fine on desktop view but not on mobile. Thank you!
* {
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #181818;
font-family: 'Poppins', sans-serif;
}
.flexbox-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.form-group {
margin: 10px 0;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
border: 1px solid #dadada;
border-radius: 6px;
font-size: 16px;
outline: none;
font-family: 'Open Sans', sans-serif;
}
input[type="text"]:focus,
input[type="password"]:focus {
border: 1px solid #0066cc;
}
button {
font-size: 15px;
font-weight: 800;
}
.btn-info {
border: 1px solid #2157eb;
background-color: #2157eb;
color: #fff;
}
.btn-success {
border: 1px solid #1fa167;
background-color: #1fa167;
color: #fff;
}
.btn-link {
text-decoration: none;
font-size: 15px;
font-weight: 400;
color: #0066cc;
}
hr {
border: none;
border-bottom: 1px solid #cfcfcf;
margin: 15px 0;
}
.index-page-flexcon1 {
width: 100%;
height: 100%;
padding: 20px;
gap: 40px;
align-items: center;
justify-content: space-around;
}
.index-page-flexcon1 .flexbox-item-1 {
max-width: 380px;
text-align: center;
}
.index-page-flexcon1 .flexbox-item-1 h1 {
margin: 0;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: -webkit-linear-gradient(0deg, #3496e6 30%, #a465d9 70%);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.index-page-flexcon1 .flexbox-item-1 p {
color: #c4c4c4;
}
.index-page-flexcon1 .flexbox-item-2 {
width: 300px;
padding: 20px;
border: 1px solid #f3f3f3;
border-radius: 6px;
background-color: #f3f3f3;
text-align: center;
}
.index-page-flexcon1 .flexbox-item-2 .btn-info {
width: 100%;
padding: 10px;
}
.index-page-flexcon1 .flexbox-item-2 .btn-success {
padding: 8px 16px;
margin-top: 10px;
border-radius: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
<link rel="preload" href="assets/css/style.css?version=<?php echo rand(0, 100); ?>" as="style" onload="this.onload=null; this.rel='stylesheet';">
<noscript><link rel="stylesheet" href="assets/css/style.css?version=<?php echo rand(0, 100); ?>"></noscript>
<!-- boxicons link -->
<link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6275646e62637e4d3f233c2339">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
<title>WeChitChat</title>
</head>
<body>
<div class="flexbox-container index-page-flexcon1">
<div class="flexbox-item-1">
<h1>WeChitChat</h1>
<p>
<span class="icon"><i class='bx bxs-heart'></i></span> Simple,
<span class="icon"><i class='bx bxs-zap'></i></span> Fast and
<span class="icon"><i class='bx bxs-check-shield'></i></span> Secured. Stay connected to your friends and family
<span class="special-text">Anytime, Anywhere.</span>
</p>
</div>
<div class="flexbox-item-2">
<form action="">
<div class="form-group">
<input type="text" name="" id="" placeholder="Username">
</div>
<div class="form-group">
<input type="password" name="" id="" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn-info">Log In</button>
</div>
<div class="form-group">
<hr>
<a href="#" class="btn-link">Forgot your password?</a><br/>
<button type="button" class="btn-success">Register an account</button>
</div>
</form>
</div>
</div>
</body>
</html>