All solutions

Hello FEM lovers,

After today's challenge, which took me around 7 hours, I know that I definitely need to practice more!

I have two things that I would like to discuss with you. Please feel free to answer one or both of them.

#1

Is there any improving advice on my RWD, which was not working perfectly? I was especially not sure about the following:

Desktop:

• .picture won't feat the 100% height of viewport
• left content I wrote 50%, and I wonder is there any more clever way to do so?

Mobile:

• background colour will not cover some part of the viewport when scrolling the page

#2

Is it okay to write the following CSS?

:root {
font-size: 1.5rem;
}

I think this is unusual, but it works. It's because I want to use em and avoid writing more code for the next media query level.

Or do you have any better ideas for achieving this challenge without using media queries?

Thank you, and have a great day :D"

Hello everybody,

it is my second challenge here, and I still learned a lot from this small challenge which is awesome!

I have two things that would like to discuss with you. Please feel free to answer one or both of them.

#1

I wonder why even I set card-img-container & img.cube the same border-radius (10px), they just don't fit. The background colour of container will appear a little, so that's why I changed its border-radius to 12px in order to hide. If you use devtool to check, you will see what I mean.

#2

To write a hundred percent alike layout is fun! Yet, about the tiny tweaks of font family, font-size, line-height... I always spend lots of time on it. I wonder what's your order to take care of these properties? How do you figure it efficiently from the beginning? I also felt this time my HTML structure wasn't good enough, so that might be another reason leading to my long codes.

Thank you, and have a great day :D

Hi everyone,

My name is LJBL, I'm so happy and excited to finish my first challenge in Frontend Mentor, though it did take me more time than I thought.

I have two questions below, and feel free to answer either of them, I appreciate it ^^!

• I wonder how to avoid when users zoom-in their browsers and the format of text/paragraph going off. In this case, I assume FEM want all the text fix on the card, right? I asked because it's funny that I incidentally zoomed in my browser to 90% while I was coding..., luckily I found out before I submitting the work! I struggled like for an hour to check where went wrong lol.

• Every time when I try to place an image, I just not sure which to choose the better, the property background-image , or a <img> ? Which do you prefer, or in which condition will you choose to use?

Thank you for your time :^D Happy coding!