setting up responsiveness for mobile with the width 375px. In the challenge can I use translate feature in css3?
Ivan Olmo
@ivanolmoAll comments
- @sharifulb07Submitted about 2 years ago@ivanolmoPosted about 2 years ago
Hi Shariful. It looks like you have 2 branches, "main" and "master". Your "main" branch is your default branch but has no code. Your "master" branch does have code. In your "main" branch, you can merge the code that is in your "master" branch, then your solution should be complete.
Marked as helpful0 - @Vonka-hubSubmitted over 2 years ago
I used text-align to center most of my divs, i feel like this is not a good solution to my layout problems, would like to know if this is bad practice.
As always, im open to any feedback. Thank you in advance for any criticism given.
@ivanolmoPosted over 2 years agoYou can center your main card very easily using flexbox. For example, you have
text-align
on your body, but that should only be used to align text, not elements/containers. You don't necessarily need themargin-top
on your.container
either. Instead you can do:body { display: flex; justify-content: center; /* this will center the card horizontally */ align-items: center; /* this will center the card vertically */ }
You can do similar code with your
.container
to center yourimg
and maindiv
, and also with your.text-box
to center yourh2
andp
, like this:.container, .text-box { display: flex; flex-direction: column; align-items: center; /* this will align your flex items (img and div) horizontally inside your card */ }
The vertical spacing between elements on your card can be accomplished with flex
gap
or with margins. For example, your.text-box
has amargin-top
of 30px, and that works to space it from yourimg
, but the same can be accomplished by settinggap: 30px
if your.text-box
was a flex container.You'd only want to use
text-align
to center align your actual text within it's containing element, such as the text inside yourh2
andp
.Here is how I'd change your CSS, with comments:
* { margin: 0; padding: 0; } body { background-color: hsl(212, 45%, 89%); /* text-align: center; <--- remove this */ display: flex; justify-content: center; align-items: center; min-height: 100vh; /* add this so body will take up the entire viewport */ } .container { /* display: inline-block; <--- remove this */ display: flex; flex-direction: column; /* the card flows vertically, so use column */ align-items: center; /* will center img and .text-box horizontally */ background-color: #fff; padding: 20px; font-family: 'Outfit', sans-serif; padding-bottom: 40px; /* text-align: center; <--- remove this, instead apply it to elements that have text inside */ border-radius: 4%; box-shadow: 3px 3px 20px 2px rgba(0, 0, 0, 0.1); /* margin-top: 50px; <--- remove this, flex will position the card */ } .container img { border-radius: 4%; width: 325px; } .text-box { margin-top: 30px; /* <--- doesn't necessarily have to be removed, but you can use flex gap on the parent container instead */ /* text-align: center; <--- remove this, instead apply it to elements that have text inside */ display: flex; flex-direction: column; align-items: center; gap: 20px; /* instead of giving your h2 padding-bottom, give the flex container 20px gap instead to accomplish the same thing */ } /* h2 and p are now centered by flex box */ .text-box h2 { /* padding-bottom: 20px; <--- remove this, replaced with gap above */ text-align: none; /* now add this to center the text within it's own container */ } .text-box p { color: hsl(220, 15%, 55%); font-size: 15px; text-align: center; /* now add this to center the text within it's own container */ }
Marked as helpful2 - @ivanolmoSubmitted over 2 years ago@ivanolmoPosted over 2 years ago
Awesome, thanks for the feedback! Already worked all of it into the next challenge :)
0