英文:
Too much space-around between flex items in mobile view
问题
You can reduce the space between flex items in mobile view by adding the following CSS code:
@media (max-width: 768px) { /* Adjust the max-width as needed */
.index-page-flexcon1 {
justify-content: center; /* Center the items horizontally */
}
.index-page-flexcon1 .flexbox-item-1 {
margin-bottom: 20px; /* Add margin to create space between title and description */
}
}
This code targets screens with a maximum width of 768 pixels (typical for mobile devices) and adjusts the layout accordingly, reducing the space between the app title and description in the .index-page-flexcon1 container. You can adjust the max-width value as needed for your specific mobile breakpoint.
英文:
how to reduced the space between the flex items in mobile view? I already use gap or margin in flex items but still no luck. Here is my code for your reference. Thankyou
I am expecting to reduce the space between the app title and description and my login form for mobile view only, it works fine in desktop view. Thankyou
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<!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/boxicons@2.1.4/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>
<!-- end snippet -->
答案1
得分: 0
你可以通过添加align-content属性来实现（用于在项目换行时 — 只有通过添加flex-wrap: wrap才能实现）：
.index-page-flexcon1 {
flex-wrap: wrap;
align-content: center;
}
（其他选项包括align-content: flex-start等。）
英文:
You can do it by adding the align-content property (for when items wrap — which they can only do by adding flex-wrap: wrap):
.index-page-flexcon1 {
flex-wrap: wrap;
align-content: center;
}
(Other options include align-content: flex-start etc.)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论