Responsive with Flex CSS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Alephy, welcome to Frontend Mentor, and good job finishing your first challenge! Regarding resizing, do you mean the top and side padding of your main container to be at the same width regardless of which size you view it at, or do you mean centering the component? If you do mean centering the component (which is more commonly seen), you can try this in your main container since you're already using flex box: remove padding-top and add min-height: 100vh, and see whether that achieves what you're trying to do.

  In case you do mean the first case of having equal widths for the top and side, you can probably try using min() for the padding, and try something like padding: min(10%, 3rem) min(10%, 3rem) for the top and side paddings, where the browser chooses either 10% as the width or 3rem, depending on the size of the browser.

  One suggestion I have is to try using more descriptive class names; I usually put a .component class on the main instead of using the main tag; it's easier to quickly know what the elements are when you use descriptive names, but most importantly it helps others when they read your code to quickly understand what you're doing!

  Once again, great job, and keep coding!

  0

  ---

  

  Alephy [ BR ]•80

  @alephy9Posted over 2 years ago

  @elaineleung Hello, I achieved the result I wanted using min-height: 100vh; and that was exactly where I wanted to go. I had done another project and had a lot of problems using the height and setting the 'vh', since then I'm afraid and I try to avoid it. But using it correctly can be very useful and I thank you for your explanation it helped me a lot, I will study more about this property.

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @alephy9 Glad it worked :) Yes, there's quite a difference between height: 100vh and min-height:100vh. With just height, you're making the width fixed and it won't change; it will always be 100vh, which is not a good idea if your content is larger than your window. But with min-height, the height is not fixed and is allowed to be flexible; you are telling the browser that the minimum height is 100vh and that it can make it larger than 100vh if there's the need to. Keep studying!

  Marked as helpful

  0