47 Replies
\
html and css is here
margin-top from article
but why is it doing for the whole body
not just the article
something somethin collapsing margins
help me pls i dint get that
The
body
element has a default 8px margin. If you want to remove it set margin: 0;
on your body selectorstill the body is also comming down
if you want to stick the article to the top remove the margin from body and margin-top from article
Can you be more specific about what youβre talking about? Your initial question is pretty vague. What space above what line?
when i use do that margin-top and open the devtools and hover on the body there is a small gap but the article should have that gap
because of collapsing margin that 8px margin you see on body is a part of the margin set on the article
hope that makes sens
oh ok
how to do something like this ?
i want to achieve this overlappin thing
position/translate/grid pick your flavor π
Grid didn't come to my mind. Kinda curious how to do that
grid
lets do grid
How do we do it using grid? I understood the position and translate approaches
@mannix_ got some audience ah ? noice
Have you tried using relative positions and z-index?
ya bro but even i would like to try with grid
π
I suggest you go with translate then dude. It doesnt look that hard
@mannix_ pls help me
Grid
just because it's an option doesn't mean it's most viable
i will try it my self and let you know guys
Layout Land
YouTube
Overlap on the Web, Graphic Design Made Easy with CSS Grid
CSS Grid makes it easy to create overlap in our designs and opens up a world of new possibilities in graphic design on the web.
For decades, we wanted to create these kinds of designs, but didn't have the tools. We trained each other to stop being creative and stop wanting to make such layouts. It's time to shake these old habits up and explor...
guys i think i got it
its almost easy
i mean this is what i wanted
i need one help i want that red card width to be 65ch so how much the whole gird width to be
.card-grid{
display:grid;
max-width: calc(20px + 65ch);
height: 500px;
grid-template-columns: 20px 1fr 1fr 20px;
grid-template-rows: 20px 20px 1fr 1fr 20px;
margin: auto;
}
.card1{
background-color: blue;
grid-row: 3 / 4;
grid-column: 1 / 3;
z-index: 3;
}
.card2{
background-color: red;
grid-column: 2 / 5;
grid-row: 2 / 5;
}
.card3 {
grid-column-end: -2;
grid-row: 1 / 4;
}
.card3 > img {
object-fit: cover;
width: 100%;
}
this is my css
i want this card2 widht to be 65ch
set that using a max-width property on card2, or if that doesnt work, try that on the card-grid. See if that works
for all of you that wanted grid solution https://codepen.io/MannixMD/pen/VwVXVmv
For the none of you that wanted negative margins https://codepen.io/adamantonio/pen/gOQeZMz
bro this is noice
i love it
dude wth! This was so simple.... why did anyone not think of that?
i did that
i posted a pic
see up you will get an ugly ass colors but overlapping pic
it may be easy with margins but not responsive π
so be careful with negative margins
You can just use media queries to change margin to become positive for smaller screens?
this one pro
i mean bro
of course you can
i need to practice. grids more. Just today I learnt so much can be done with grid π
yea i myself never loved css more
Grid is love Grid is life π
btw i am making a food blog design i want some good color scheme where can i do that ?
and is the grid setup i asked for is any good or should try something else and suggest me some bro pls
If you have additional questions please make a new post in the appropriate channel
oh ok