clevermissfox Comments - Answer Overflow

Topics

clevermissfox

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers

KPCKevin Powell - Community

•Created by DanKaplanSES on 3/30/2025 in #front-end

What does "child" refer to in the `nth-child` pseudo class?

Because the pseudo class is attached to .child selector , it indicates that it’s referring to itself (like div.container means one element that is a div with a class of container where div .container is a div with a .container within ); if there was a space between .child :nth-child(2) it would refer to the elements within. Eg .container :nth-child(2) note the space ; .child:nth-child(2) note the lack of space Other helpful pseudo classes in the same vein: - .child:nth-of-type(2) which may click better and is safer to use - newer and have to check support :nth-child(2 of .child)

4 replies

KPCKevin Powell - Community

•Created by Myra on 3/27/2025 in #front-end

Toggle switch not working

For flex and grid containers , since there are no collapsing margins , what’s your approach ? Do you then select everything inside anytime you use a flex/grid ?

19 replies

KPCKevin Powell - Community

•Created by Mehrab on 3/28/2025 in #front-end

Heading tags in different parent elements?

Just wanted OP to know it’s an option if they don’t want to include that h1 visually “Articles” since their question was about using the h1 as the first article title so they hadn’t included a heading like “articles” already for a reason

40 replies

KPCKevin Powell - Community

•Created by Mehrab on 3/28/2025 in #front-end

Heading tags in different parent elements?

Same

40 replies

KPCKevin Powell - Community

•Created by Mehrab on 3/28/2025 in #front-end

Heading tags in different parent elements?

Sorry if it came off like I was suggesting title and h1 needs to match ; the comparison was supposed to help OP think about an h1 as what describes the page as a whole not a single article and it can be hidden if it’s not wanted visually

40 replies

KPCKevin Powell - Community

•Created by Mehrab on 3/28/2025 in #front-end

Heading tags in different parent elements?

Not match but just trying to illustrate how to think about the top level some h1s can be for this kind of article page . Vs using it as the heading for one article and then an h2 for the rest of the article headings; that hierarchy suggests the article w an h1 is more important than the others .

40 replies

KPCKevin Powell - Community

•Created by Myra on 3/27/2025 in #front-end

Toggle switch not working

Light-dark function is gaining support which makes this ; prefers-color-scheme media queries can be helpful to toggle custom properties Eg

:root {
—clr-primary-bg: whitesmoke;
}

@media (prefers-color-scheme : dark) {
—clr-primary-bg: black;
}

Body {
background-color : var(—clr-primary-bg);
}

:root {
—clr-primary-bg: whitesmoke;
}

@media (prefers-color-scheme : dark) {
—clr-primary-bg: black;
}

Body {
background-color : var(—clr-primary-bg);
}

19 replies

KPCKevin Powell - Community

•Created by Mehrab on 3/28/2025 in #front-end

Heading tags in different parent elements?

Usually h1 illustrates the page “title” basically what you would put in the head <title> tag . Then each section would start with h2 and go down the levels as needed. I’ll often hide the h1, with a .visually-hidden if it doesn’t make sense to be visually shown

40 replies

KPCKevin Powell - Community

•Created by roger on 3/25/2025 in #front-end

Responsive image

Aspect ratio may be a better property then height

10 replies

KPCKevin Powell - Community

•Created by markeya on 3/12/2025 in #front-end

Extra space, missing space and breakpoint adjustment

Rarely is someone going to give you an image that is already optimized to just throw it your project. Working with image son the web is a delicate balance between file size (eg 30Kb) , size/dimensions (eg 11080x800), and how it needs to be used on your page. Part of optimizing file size is converting to lighter weight file types like .webp. Then you want the dimensions to be large enough for the resolution to be at least 72ppi for the size you’re using it on the page. Whenever possible , use vector images (svgs) instead of raster images (jpg, webp, tiff, PNG, avif…) As for the font sizes I’m not totally sure what you mean. When you turn your phone sideways there will be more space for the line of text . Do you have an example of a website you refer to whrre they don’t change . REM is more about accessibility meaning if the user goes into their browser settings and wants to make the text size larger or smaller , they are able to do that. If the user wants to zoom into the page to zoom the text, they’re able to do that. Pixels don’t. I know how style seems more important but a page that is completely unstyled with just the browser defaults and the ability to reach the content is enter than a beautifully styled page that isn’t inclusive and users can’t reach the content or make the font size what they can read

18 replies

KPCKevin Powell - Community

•Created by roelof on 3/14/2025 in #front-end

Overlapping css grid problem

1. change two lines of css on the grid template columns and grid template rows 2. comment out the grid template areas for now 3. then make sure you assign “overlay2” grid area name to the new element

17 replies

KPCKevin Powell - Community

•Created by roelof on 3/14/2025 in #front-end

Overlapping css grid problem

My perspective is that it’s simple to adapt - you just need to make some adjustments on how you declare the grid template . I find the grid areas overlap hack to be a little more confusing so didn’t want to bring it up but maybe you’ll find it easier to work with than named grid lines

17 replies

KPCKevin Powell - Community

•Created by roelof on 3/14/2025 in #front-end

Overlapping css grid problem

And make sure to comment out your grid-template-areas as it’s not ideal for keeping overlapping content simple

17 replies

KPCKevin Powell - Community

•Created by roelof on 3/14/2025 in #front-end

Overlapping css grid problem

Like I said you will need to adjust the values and also make sure to set the grid rows up

17 replies

KPCKevin Powell - Community

•Created by roelof on 3/14/2025 in #front-end

Overlapping css grid problem

I see the red box is the overlay I just didn’t know what you wanted to add. You can use named grid lines for overlapping content.

Css 
grid-template-columns: [new-start overlay-start] 2rem [new-end] 1fr [overlay-end header-start content-start] 2fr [header-end content-end]

Css 
grid-template-columns: [new-start overlay-start] 2rem [new-end] 1fr [overlay-end header-start content-start] 2fr [header-end content-end]

Here’s an example of how you can use it on cols , give it a try and of course adjust the column sizes to the values you want . Then give it a try to set up the grid-template-rows using name grid lines. And don’t forget to see the grid area name on the new element ( I called it “new” on this example but give it a more appropriate name )

17 replies

KPCKevin Powell - Community

•Created by roelof on 3/14/2025 in #front-end

Overlapping css grid problem

Maybe someone else will grasp your description but I would need a sketch or figma wireframe or some kind of example of what you're going for of how small and where the overlap is and what does the others side of the new small div overlap onto

17 replies

KPCKevin Powell - Community

•Created by vince on 3/13/2025 in #front-end

Parallax / floating effect

Right now the background all looks the same so it just kind of looks like the scroll is lagging

5 replies

KPCKevin Powell - Community

•Created by vince on 3/13/2025 in #front-end

Parallax / floating effect

You just need to mess with the values for delay, duration and timing function to kind of tweak it to where you want it, it's unfortunately not am absolute science w step by step instructions Just looked at your pen amd I only see a bg color and one text node. Usually with parallax you have some different layers or bg image or a gradient so there's some contrast between the different elements moving

5 replies

KPCKevin Powell - Community

•Created by markeya on 3/12/2025 in #front-end

Extra space, missing space and breakpoint adjustment

No description

18 replies