I'm practicing CSS/flexbox reproducing the login page of instagram but i'm facing a issue with horizontal alignment that i can't figure out what's wrong.
There's two major containers inside one big wrapper ("instagram-wraper" - each one get 50% of the width of that wraper).
- Container 1 (left): "cellphone-img" that contain only a cellphone img
- Container 2 (right): "account-info-container" that contain all the login inputs, subscribe, and so on.
The image on the left side work as intended, but what i'm trying to do is to align all the content in the account-info-container to the left with justify-content, essentially putting the image and the login containers side by side, but it doesn't work. What am i missing? (bet it's something simple...)
Thanks in advance.
PS: I didn't work on the responsiveness yet.
/* General settings */
* {
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto";
}
body {
width: 100%;
min-height: 100vh;
background-color: rgb(243, 243, 243);
font-size: 14px;
}
.flex-container {
display: flex;
/* max-width: 1200px; */
margin: auto;
width: 100%;
}
/* Wrapper img wrapper login */
.instagram-wrapper {
align-items: center;
width: 60%;
height: 85vh;
}
/* Cellphone img container */
.cellphone-img {
display: flex;
align-items: center;
justify-content: flex-end;
width: 50%;
/* margin-left: 150px; */
}
.cellphone-img img {
height: 630px;
width: auto;
}
/* Login subscribe ap-downloads */
.account-info-container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-start;
width: 50%;
/* margin-right: 150px; */
}
/* Login wrapper */
.login-container {
flex-direction: column;
height: 420px;
width: 70%;
border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
background-color: #fff;
}
.insta-logo {
width: 100%;
display: flex;
justify-content: center;
padding-top: 55px;
padding-bottom: 35px;
}
/* Login inputs container */
.login {
align-items: center;
flex-direction: column;
}
.login input {
width: 85%;
height: 36px;
background-color: rgba(var(--b3f, 250, 250, 250), 1);
border: 1px solid rgba(var(--ca6, 219, 219, 219), 1);
border-radius: 3px;
font-size: 13px;
padding-left: 8px;
}
.input-login {
margin-bottom: 10px;
}
.input-password {
margin-bottom: 20px;
}
.login-btn {
width: 85%;
background-color: rgba(var(--d69, 0, 149, 246), 1);
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
font-size: 14px;
padding: 5px 9px;
cursor: pointer;
font-weight: 600;
box-sizing: border-box;
}
.or-ruler {
width: 85%;
color: rgba(var(--f52, 142, 142, 142), 1);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
margin-top: 20px;
}
.or-ruler::before {
content: "";
width: 120px;
height: 1px;
background-color: rgba(var(--ca6, 219, 219, 219), 1);
}
.or-ruler::after {
content: "";
width: 120px;
height: 1px;
background-color: rgba(var(--ca6, 219, 219, 219), 1);
}
.facebook-login-btn {
width: 85%;
color: #385185;
background-color: transparent;
border: none;
cursor: pointer;
margin: 30px auto;
display: flex;
justify-content: center;
}
.facebook-login-btn img {
width: 17px;
height: auto;
margin-right: 5px;
}
.forget-pass-link {
font-size: 12px;
cursor: pointer;
padding-bottom: 40px;
color: #00376b;
}
/* Subscribe container */
.subscribe {
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
background-color: #fff;
height: 70px;
width: 70%;
margin-top: 10px;
margin-bottom: 30px;
}
.subscribe p a {
font-weight: 600;
color: rgba(var(--d69, 0, 149, 246), 1);
}
/* Apps download wrapper */
.app-download {
align-items: center;
flex-direction: column;
width: 70%;
}
.app-imgs {
display: flex;
width: 100%;
justify-content: space-around;
}
.app-imgs img {
width: 170px;
height: auto;
padding-top: 30px;
}
/* Footer */
.footer-section {
max-width: 60%;
height: 100px;
margin: auto;
margin-bottom: 200px;
}
footer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
}
footer div {
margin: 8px auto;
}
footer a {
margin: auto 10px;
color: rgba(var(--f52, 142, 142, 142), 1);
text-decoration: none;
}<div >
<div >
<img src="./images/instagram-celular2.png" alt="instagram cellphone" />
</div>
<div >
<div >
<div >
<img src="./images/instagram-logo.png" alt="instagram-logo" />
</div>
<div >
<input type="text" placeholder="Telefone, nome do usuário ou email" />
<input type="text" placeholder="Senha" />
<button >Entrar</button>
<div >
<span> OU <span>
</div>
<button >
<span><img src="./images/fb-icon.png" alt="" /></span>
<span>Entrar com o Facebook</span>
</button>
<a href="">Esqueceu a senha?</a>
</div>
</div>
<div >
<p>Não tem uma conta? <a href="">Cadastre-se</a></p>
</div>
<div >
<p>Obtenha o aplicativo.</p>
<div >
<a href="#"><img src="./images/apple-button.png" alt="appstore-img" /></a>
<a href="#"><img src="./images/googleplay-button.png" alt="googleplay-img" /></a>
</div>
</div>
</div>
</div>
<section >
<footer>
<div>
<a href="">Meta</a>
<a href="">About</a>
<a href="">Blog</a>
<a href="">Jobs</a>
<a href="">Help</a>
<a href="">API</a>
<a href="">Privacy</a>
<a href="">Terms</a>
<a href="">Top Accounts</a>
<a href="">Hashtags</a>
<a href="">Locations</a>
<a href="">Instagram Lite</a>
<a href=""> Contact Uploading & Non-Users</a>
</div>
<div>
<a href="">Dance</a>
<a href="">Food & Drink</a>
<a href="">Home & Garden</a>
<a href="">Music</a>
<a href="">Visual Arts</a>
</div>
<div>
<a href="">English</a>
<a href="">© 2022 Instagram from Meta</a>
</div>
</footer>
</section>CodePudding user response：
If both of your items inside the container are each 50% width, they won't move horizontally—they're spanning across the entire container; there's no free space (and justify-content works by distributing free space).
Remove the width: 50% rule and work on each item individually (using width, margin and/or flex properties).
Also, the justify-content property doesn't take left and right values. They're invalid. Here are the values that work.
Finally, when you're ready to pin both items to the left, consider flex auto margins.