Bishal
KPCKevin Powell - Community
•Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
Yeah, both will work but one dimension, usually prefer flex, like if you have complex layout like, 2 dimensional.. or you have to create 2 cards in top in column 1 and column 2 and 3 cards in below that, to wrap this in smaller screen in that complex layout grid plays very smoothly with less number of code as compare to flex.
20 replies
KPCKevin Powell - Community
•Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
20 replies
KPCKevin Powell - Community
•Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body { background: rgb(167, 167, 167); }
nav { padding: 25px 25px; display: grid; align-items: center; grid-template-columns: 1fr auto; font-family: Arial, Helvetica, sans-serif; gap: 25px; }
nav ul { flex-wrap: wrap; list-style: none; display: flex; justify-content: flex-end; margin-right: 30px; gap: 35px; }
nav ul li { display: inline-block; }
nav ul li a { font-size: 1.1rem; font-weight: bold; text-decoration: none; color: #ffffff; outline-color: currentColor; font-style: italic; letter-spacing: 0.2rem; } .main-container { display: flex; justify-content: center; align-items: center; }
.container { background: #ffffff; height: 10rem; width: 20rem; padding: 2rem; border-radius: 1rem; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); }
body { background: rgb(167, 167, 167); }
nav { padding: 25px 25px; display: grid; align-items: center; grid-template-columns: 1fr auto; font-family: Arial, Helvetica, sans-serif; gap: 25px; }
nav ul { flex-wrap: wrap; list-style: none; display: flex; justify-content: flex-end; margin-right: 30px; gap: 35px; }
nav ul li { display: inline-block; }
nav ul li a { font-size: 1.1rem; font-weight: bold; text-decoration: none; color: #ffffff; outline-color: currentColor; font-style: italic; letter-spacing: 0.2rem; } .main-container { display: flex; justify-content: center; align-items: center; }
.container { background: #ffffff; height: 10rem; width: 20rem; padding: 2rem; border-radius: 1rem; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); }
20 replies
KPCKevin Powell - Community
•Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
body {
Display: flex;
Justify-content: center;
Align-items: center;
min-height: 100vh;
}
20 replies
KPCKevin Powell - Community
•Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
You never ever have to give min-height: 40rem; in .container div
Only give min-height in body, that's why entire box is disappeared, it wrapped your component
20 replies
KPCKevin Powell - Community
•Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
Have you given display flex in body? Share your code please
20 replies
KPCKevin Powell - Community
•Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
Display: flex;
Justify-content: center;
Align-items: center;
min-height: 100vh;
20 replies
KPCKevin Powell - Community
•Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
Yeah, by seeing his code If he use background image in screen then text inside the container will not be clickable, in that z-index will manage it
73 replies
KPCKevin Powell - Community
•Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
Simple bro, use grid and give z-index to the border. By using grid it will become more simpler, when you squeeze the size of the screen the container will automatically get wrap and also it will be responsive.
73 replies