Wolle Comments - Answer Overflow

Topics

Wolle

KPCKevin Powell - Community

•Created by Wolle on 5/7/2024 in #front-end

container size and position fixed

Thanks for your reply! Thats unfortunate. So if I want to use fixed elements, they are not allowed to be inside a container.

4 replies

KPCKevin Powell - Community

•Created by Ricsi on 5/1/2024 in #front-end

Container query makes absolutely positioned elements not appear correctly

I realized container: size; counts as parent similar as position: relative to position: absolute to position: fixed. Maybe thats what happening here, too.

6 replies

KPCKevin Powell - Community

•Created by Zpiboo on 11/30/2023 in #front-end

Select a pseudo-element's "owner" (css nesting)

Maybe with :has(::after)?

26 replies

KPCKevin Powell - Community

•Created by Anurag Gupta on 11/9/2023 in #front-end

Help on Grid Layout

Why do you think that max-width would restrict height of an element? On the other hand I am quite baffled, what is happening there exactly. If your problem is a practical one: just remove the height, if its more scientific: maybe someone else has an answer to this interesting behavior.

9 replies

KPCKevin Powell - Community

•Created by Anurag Gupta on 11/9/2023 in #front-end

Help on Grid Layout

Your Problem is height. You would have to limit their height to: ((500px - containerGap) / 2 - boxGap) / 3 Which is problematic. The question is: why does your container need to be exactly 500px in height?

9 replies

KPCKevin Powell - Community

•Created by Anurag Gupta on 11/9/2023 in #front-end

Help on Grid Layout

If you set height, all children sizes have to be thought from the parent, which is the oposite of what browsers do normally.

9 replies

KPCKevin Powell - Community

•Created by Anurag Gupta on 11/9/2023 in #front-end

Help on Grid Layout

General advice: Try not to use height on elements, because it can cause problems (like this) and even more when trying to be responsive, use it only if you know why you need it, usually min-height is the better option. Most of the time width: 100% does nothing.

9 replies

KPCKevin Powell - Community

•Created by Anurag Gupta on 11/9/2023 in #front-end

Help on Grid Layout

1) the size of everything gets dictated by the images. Via set size ratios (grid-rows) the rest of the elements are sized. 2) your .wrapper has a set height of 500px, which is not enough, so the grid-parent wants to overflow, but it does not because it has height: 100%.

9 replies

KPCKevin Powell - Community

•Created by ZrizzyOP on 10/26/2023 in #front-end

How to check image collision in js?

What is the part you are missing? Getting the dimensions of both objects? Compare the dimensions of the objects if they are intersecting? For the latter I would try IntersectionObserver first.

11 replies

KPCKevin Powell - Community

•Created by Boeroe on 10/26/2023 in #front-end

How to get the image a full size of the div.

I think the puzzle piece you are missing may be object-fit

12 replies

KPCKevin Powell - Community

•Created by pary on 10/26/2023 in #front-end

image overriding a div's bc image

The reason why your gradient is behind your .image-container ist, that the .image-container has position: relative, which lifts elements. If you want to move the element below with negative margins, you need to put a postion on both or none. Hint: negative margins not only move the element, but all below it, too.

8 replies

KPCKevin Powell - Community

•Created by pary on 10/26/2023 in #front-end

image overriding a div's bc image

You could place the gradient-div and the image in the same container, put position: relative on the container and position: absolute on the gradient-div.

8 replies

KPCKevin Powell - Community

•Created by Judy on 10/25/2023 in #front-end

VS CODE ISSUES WITH FORMAT ON SAVE

That just says, that it is still in progress. This can take a moment, after VSCode is started. If this problem persists, it may be your file size, or your system is under stress.

6 replies

KPCKevin Powell - Community

•Created by lafayette on 10/10/2023 in #front-end

HOW TO MAKE HEADER CONTENT LINE UP WITH FLEXBOX COLUMNS

With all the cool grid functions you can do most of the things (single line) flex can do, too.

35 replies

KPCKevin Powell - Community

•Created by lafayette on 10/10/2023 in #front-end

HOW TO MAKE HEADER CONTENT LINE UP WITH FLEXBOX COLUMNS

Its called "flex" for a reason, its flexible, where grid is rigid.

35 replies

KPCKevin Powell - Community

•Created by lafayette on 10/10/2023 in #front-end

HOW TO MAKE HEADER CONTENT LINE UP WITH FLEXBOX COLUMNS

Line up things with flex? You don't. It may work, but theres no guarantee. If you want things to line up the use of grid is way easier.

35 replies

KPCKevin Powell - Community

•Created by arghc on 10/2/2023 in #front-end

Sidebar layout with intrinsic collapsing grid, CSS-only

To get different height/width columns/rows, you can put different sizes in your grid-template(-columns/-rows). For example:

grid-template-columns: 300px 1fr;
grid-template-rows: 80px 1fr 120px;

grid-template-columns: 300px 1fr;
grid-template-rows: 80px 1fr 120px;

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

2 replies

KPCKevin Powell - Community

•Created by Oxycodone on 9/29/2023 in #front-end

JavaScript question

For-loops evaluate the expression before executing. So it gets executed for 0, 1 and 2 and stops the moment i is 3.

19 replies

KPCKevin Powell - Community

•Created by cirilla on 9/25/2023 in #front-end

CSS grid, setting maximum span

You can use column-start/end with negative numbers to count from the right side. But if I understand you correctly, you will probably need media queries or JS for that.

7 replies

KPCKevin Powell - Community

•Created by cirilla on 9/25/2023 in #front-end

CSS grid, setting maximum span

Maybe min()/max()/minmax() can help you? If you use it with fr as max it won't add new columns.

7 replies