Skip to content
OverviewSolutions
9
Comments
2
Jaz
@arfernn

All comments

  • Stefan•90
    @SaitenhexerSubmitted about 1 year ago

    I tried to use the DRY Principle with the Buttons but the text color was different.

    Would there be a way to inherit the background color as the font color?

    3-Column Responsive Layout

    1
    Jaz•190
    @arfernnPosted about 1 year ago

    I see what you mean with your question. However I think sometimes it's better to not to take things to the limit. It is good that you try to not to repeat the same color multiple times, but this is precisely why you made it a variable, to be able to reuse the actual value in multiple places. And if you change the value, you have to change it only in one place.

    background-color can be inherited if you add in the children background-color: inherit. But you can't use the inherited value to assign it to a color property, as far as I can tell.

    Marked as helpful
    1
  • Jaz•190
    @arfernnPosted about 1 year ago

    Hi there! nice job, I've been checking your code and I wanted to give you a few comments where I think the solution could be improved

    • I've noticed you centered the container class by using margins. This is normally a better way (it will find the exact center) to achieve it:
    body
    {
      background-color: var(--secondary-color);
      display: flex;
      height: 100vh;
      width: 100%;
      justify-content: center;
      align-items: center;    
      flex-flow: column;
    }

    This approach uses flexbox, you tell the container parent (body, in this case) to act as a flexbox, and tell him to render children in a column, and to align them vertically (justify-content) and horizontally (align-items). But in order for it to work properly, you need to fix the parent's height, we choose 100vh in this case since it's the whole height of the viewport. Otherwise vertical alignment does not work.

    Then, you can remove your margins.

    • Also, it will be more convenient when other people read your code if you indent it consistently. I recommend using a formatter for this. VSCode comes with an integrated one, but there are more also extensions like prettier. Then its as simple as using the key combination:
    • Shift + Alt + F : Windows Users.
    • Shift + Option + F : macOS Users.
    • Ctrl + Shift + I : Linux Users.

    This will indent your whole document and fix any formatting errors.

    Marked as helpful
    0