Frontend Mentor | Matjaz's profile

@tnzgxSubmitted almost 2 years ago

I have problem that have unknown 5 pixels added to the image class that affected my shade class style {width 100%; height: 100%} how to fix and remove the unknown pixels? thank you :)

Basic HTML & CSS

1

Matjaz•230

@rubuzPosted almost 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

Hugo Almeida•730

@almeida883Submitted almost 2 years ago

In this exercise I put into practice the variables as you had recommended, any other tip that can add value, I would appreciate it. Thank you.

Flexbox and color var!

2

Matjaz•230

@rubuzPosted almost 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

Mallory•90

@mallory-cvlhSubmitted almost 2 years ago

Hello 👋

This is my second version of this challenge. I added some hover effect and I tried to improve the readability of my code.

You can find my first version in my GitHub repository -> Old version.

Any suggestions on how I can improve are welcome! 🙂

[V2] Hover Effect - NFT Preview Card Component

1

Matjaz•230

@rubuzPosted almost 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

JJ•160

@JeremyPaymalSubmitted almost 2 years ago

Hello,

I tried to use "fill" in order to change the color of the arrow for the share button, but I did not work unfortunatly.

Any advice ?

Otherwise, how can I improve this code ?

Thanks !

JJ

Article Preview

1

Matjaz•230

@rubuzPosted almost 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