Three Column div in another container div - display:flex, float:left;
Design comparison
Solution retrospective
I could not make it responsive. I did not use bootstrap. I need to learn how to make a page responsive without bootstrap framework. I will now start to learn it. If you have any help, i am happy to learn how to do it.
Community feedback
- @NaveenGumastePosted over 2 years ago
Hello Vedat Sözen ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
-
To center the card vertically
min-height: 100vh; display: flex; justify-content: center align-item: center;
or use this 👇
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
- Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with alt. happy Coding😀
Marked as helpful0@vedatsozenPosted over 2 years ago@Crazimonk Thanks. I will use another time if i need to center a div vertically and horizontally.
1 - @Aadv1kPosted over 2 years ago
So first up, you need to center your container which you can do like so
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
Then, you need to apply a display of flex on the parent container. Don't set the height of any element let it be based on the padding. then, simply add a media query to set the flex-direction to column on mobile.
Marked as helpful0 - @vedatsozenPosted over 2 years ago
my container div is centered with margin:auto; I made margin-top: ..... display:flex is even in code
ı just need media query tutorial how to make it.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord