Skip to content
OverviewSolutions
11
Comments
5

Matjaz

@rubuz230 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Matjaz•230
    @rubuzPosted about 2 years ago

    Hi @tnzgx,

    it's not that your shade have 5 extra pixels, your .image is missing 5px on bottom. :D

    Try adding aspect-ratio: 1/1; in .image class.

    Regards, Matjaz

    Marked as helpful
    0
  • Matjaz•230
    @rubuzPosted about 2 years ago

    Hi Hugo,

    It's nice that you start using variables for colors, but you can also use them for font-weight, font-size, font-family, and so on.

    That way if the designer will change his mind after the project is done is much easier to make changes for you. You just change one line of code.

    Otherwise, pretty good job on this challenge. Keep up with good work. :)

    And a happy new year! Matjaz

    Marked as helpful
    1
  • Matjaz•230
    @rubuzPosted about 2 years ago

    Hi Mallory,

    if you want the footer to be on the bottom, and you still want to use the grid on body, you need to make 2 rows in your grid. First row is for the main content and the second row is for the footer.

    To the body element add: grid-template-rows: 1fr auto;

    To the footer element add: grid-row-start: 2; grid-row-end: 3; and remove the position and bottom.

    This will force footer to the bottom of the page.

    Regards, Matjaz

    1
  • Matjaz•230
    @rubuzPosted about 2 years ago

    Hi JJ,

    Because you used <img> tag with SVG source, you can not use fill to change the color of an image. Fill works only on <svg> tags.

    Or you can use the filter property to alter the color of an image. It's some kind of workaround. You can use this tool: https://codepen.io/sosuke/pen/Pjoqqp

    For your code, you can try with this:

    .share_btn:hover{ background-color: #48556A; }

    .share_btn:hover img { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(165deg) brightness(105%) contrast(101%);}

    Hope you will find this useful. :)

    Marked as helpful
    1
  • Matjaz•230
    @rubuzPosted about 2 years ago

    Hi!

    You can try pseudo element :focus (use it similarly as :hover element) on buttons if you want them to stay "active" after a click.

    Regards, Matjaz

    Marked as helpful
    0