Wouter Schaap Comments - Answer Overflow

Wouter Schaap

•Created by Wouter Schaap on 8/17/2023 in #front-end

SCSS @use with @layer.

@kevinpowell thnx, nah want to keep things legible, found that unless I generate things that are prone to change often I rather write it out.

7 replies

KPCKevin Powell - Community

•Created by Wouter Schaap on 8/17/2023 in #front-end

SCSS @use with @layer.

Aaand silence 🙂

7 replies

KPCKevin Powell - Community

•Created by interpod on 8/11/2023 in #front-end

Is it good practise to use "em" unit for "almost" everything ? What about CVA then ?

I agree with @croganm, if you fully understand em, it should not be an issue. What I have come to realize after working for multiple clients over the years, is that the general level of understanding of CSS of other devs that have to work on my code is usually less than my own. Which is fine, they tend to be better in other areas. However that means sometimes a clever workable solution poses a future risk if not fully understood. If code is meant for production, and sees other people working on it, I usually opt for a simpler, more spelled out solution, so chances are lowest hard to track errors are accidentally introduced later. Container queries together with rem values might be better in that case yes. I have no prior experience with CVA, can't advise you on that.

5 replies

KPCKevin Powell - Community

•Created by interpod on 8/11/2023 in #front-end

Is it good practise to use "em" unit for "almost" everything ? What about CVA then ?

The difficulty with em is, it is based on inheritance of the font-size from the current or else parent elements. So you if someone accidentally sets a font-size on a couple nested elements which rely on it, it could have a sort of ripple effect. Also see: https://blog.logrocket.com/using-em-vs-rem-css/#problems-working-em-rem

5 replies

KPCKevin Powell - Community

•Created by Rosen on 7/26/2023 in #front-end

Build a space travel website > background-size: cover and background-position

@rokata91 hey, awesome you ask again and not just say you get it, when you don't. I'd be willing to have a video call about this and walk through it together, as I'm also having difficulty wording it differently. Feel free to reach out via DM if you want.

13 replies

KPCKevin Powell - Community

•Created by andystevenson on 7/30/2023 in #front-end

Tricky nth-child

Isn't it just

p:not(:nth-child(4n+1))

p:not(:nth-child(4n+1))

6 replies

KPCKevin Powell - Community

•Created by Rosen on 7/26/2023 in #front-end

Build a space travel website > background-size: cover and background-position

This was manually placed this way. Don't think Figma has support for this yet, not sure however

13 replies

KPCKevin Powell - Community

•Created by Yann2 on 7/27/2023 in #front-end

How to make a little bit more tidy and responsive section

I'm not exactly sure what you're trying to do, however with position absolute on both the label and the checkboxes and them having percent based values makes it really hard to work with. I feel like either grid, or a flexbox solution would fit this better than what you have now.

3 replies

KPCKevin Powell - Community

•Created by Rosen on 7/26/2023 in #front-end

Build a space travel website > background-size: cover and background-position

Hehehe @rokata91 yeah I think your numbers example made sense. What I meant by that is that the layers in figma are named: center center or top center or center left. The way the image appears in a frame with that name is also how it would appear were you to use those settings (for example top center) in code.

13 replies

KPCKevin Powell - Community

•Created by Rosen on 7/26/2023 in #front-end

Build a space travel website > background-size: cover and background-position

@rokata91 I've made a small figma file: https://www.figma.com/file/TeVoivcqBbMr8ox6Y6zbAl/Untitled?type=design&node-id=1%3A17&mode=design&t=4ZlQNTX5TAfH79Xq-1 If you go to the layers panel and hover over the images in each frame, you'll see how it overlaps its container. It is similar to how image cover does its work given the settings the layer has.

13 replies

KPCKevin Powell - Community

•Created by rosg154 on 7/27/2023 in #front-end

Media Queries Override rules

Like @Kevin says, without further context it's hard to say whats wrong exactly, however you are also mixing classes and id's. That gives some specificity bumps where you might not expect them. Then !important is a nuke. Plus I'm confused by the min-width: 0px it looks like it can just be removed and it would still work. Would make the code more readable.

10 replies

KPCKevin Powell - Community

•Created by Rosen on 7/26/2023 in #front-end

Build a space travel website > background-size: cover and background-position

What cover tries to do is to have the image cover the entire area. That means it always fits exactly in one axis, and overlaps in another. With background-position you are setting first the bahavior of the background-position on the vertical axis and then the horizontal one. In the example you posted, with width and height at 500px, the image fits in the vertical axis and overlaps the horizontal axis. That means that whatever value you choose for the vertical axis has no visible effect. However if then you change the height to 250px, you change the aspect ratio of the container, and now the image fits perfectly on the horizontal axis and overlaps the vertical one. When the image overlaps on the axis you're setting a value for, then you'll see a visible change. Does this make more sense? If no, not to worry, i'll include an image later.

13 replies

KPCKevin Powell - Community

•Created by msilva8222 on 7/26/2023 in #front-end

Hi everyone!

First thing I see is the src="" attribute on the images are linked to ./assets/images/beautiful.jpg That's also a reference to a folder on the same URL, but unless you have files hosted on CodePen that doesn't probably link to anything right now. Other than that, it looks quite similar to the result you're aiming for. What is it you don't understand?

15 replies

KPCKevin Powell - Community

•Created by Rosen on 7/26/2023 in #front-end

Build a space travel website > background-size: cover and background-position

@rokata91 I want to try to explain, but maybe it's clearer if you see it work for yourself first. I think I understand where the confusion comes in. In your fiddle try setting the height to 250px and keep the width 500px. Then try again with the different combinations listed above. Hopefully this clears things out for you. If not feel free to DM me.

13 replies

KPCKevin Powell - Community

•Created by Pingus on 7/26/2023 in #front-end

Text box Highlighting

Maybe check using dev tools. Force state: active or hover. See if the gray line appears then.

2 replies

KPCKevin Powell - Community

•Created by msilva8222 on 7/26/2023 in #front-end

Hi everyone!

Welcome first of all. The first link you shared is a file on your local file system.

15 replies

KPCKevin Powell - Community