How do grid lines work in CSS grid?
Hello guys, sorry to disturb you all; can someone explain how the CSS grid lines work please; the thing I'm not understanding is why the grid lines (represented by the black line) doesn't start on the edge of the rows or columns but before the rows or columns, like in the gap, I'm very confused about that. It is like if our grid-container has a padding and the black line is drawn in this padding.
Second is why we always have 1 more row grid line or 1 more column grid line that actual number of rows and columns....
Why does a drop-shadow get cutoff when applying it to the path of an svg?
I have two identical svgs. One having a drop-shadow applied to the <svg> element and another with the same drop-shadow applied to the <path> element inside the <svg> element.
The svg with the drop-shadow applied to the <svg> element is fine. The other however get's cutoff.
My question is why?...
Make grid container like having margin-top
Here my grid item (
.box) are overflowing to the top-side of the grid container (.wrapper).
The problem is I don't want the .box looks overlapping with the .wrapper previous sibling (.first-item).
One thing I can do to solve this is with adding some pixels for margin-top to the grid-container.
But is there another way so the spacing can be dynamic to the height of overflowing .box?
...
Create this Layout
I am struggline to create this layout from a figma file. can anyone help out please?
side index is not sticking. what i'm doin’ wrong ?
https://codepen.io/kev00690/pen/zYgpNVV
i did not know how to put index on side so i put main content in one container and side part in one container. and did
display: flex; and justify-content: space-between;
IMAGE IS FOR REFERENCE....
Flex wrap issue
so i have this flex element which is great on large screens, but on mobile it isn't so good even tho i have flex-wrap:wrap
here's the code: ```.oAuth-logins{
display: flex;
flex-wrap: wrap;
/* justify-content: space-between; */...
How to make a fixed position element responsive
Hey guys, I'm trying to make the width of this searcg bar responsive to its parent but it does not work accordingly 😦 Any tips on how to get this done right?
``` <DialogContent>
<Box position={'relative'} width={'80%'}>
<Box position={'fixed'} zIndex={10} width={'50%'}>
<SearchBar name={''} placeholder={'Search'} />...
