HTML/CSS

Community feedback

• 

  Sean•175

  @sean-b765Posted over 3 years ago

  Can't preview your site but based on your code here are a few pointers:

  1. Don't use left/top on the body. The body is the container of your whole website, and you are effectively cutting out a large portion of it. Instead, have a container with your desired width/height inside the body.
  2. Look into display: flex/grid a bit more. Align-self works on child elements rather than the container. column-gap has no effect on a flex container. align-items will only apply to items within a container which has display-flex/grid specified. Your elements have display: inline-block
  3. To answer your second question, 'fr' is typically just used for grids. fr = fraction, if you have 4 columns 1fr = 1/4. You can use percentages, or calc(100%/3) to achieve a 1/3rd value. You could also use flex: 1; on each child item to get even widths for three flex-items: check this example

  Good luck! :)

  Marked as helpful

  1

  ---

  

  Muhammad Farizky Priambudi•10

  @FarizkeysPosted over 3 years ago

  @sean-b765 Hi Sean, thank you for your feedback!

  1. I'm still figuring out how to move the elements that are sticking to the left by default. If left/top properties are not recommended, I should just tweak the width/height? Or is there any more ways to move the elements?

  2. Well noted!

  3. Well noted as well!

  Thank you Sean!

  0

  

  Sean•175

  @sean-b765Posted over 3 years ago

  @Farizkeys Top/left in your case is better replaced with a margin or padding. Check this codesandbox link for how I'd approach it

  With an auto margin you are horizontally centering the .container within its parent (body)

  Then I fill the .container to the screen and set it as a flex with centered content.

  Also note the box-sizing: border-box; If you remove this line you'll see the padding on the grey container is not accounted for in the width.

  0