how to approach this complex layout ?
i have tried made the character and the button absolute and the other as a background, but the result if we resize it will stretch and look so bad....
84 Replies
which layout?
that's an huge emoji
yes it's
i would just use grid
yes can you elaborate more, i never use that kind of approach before
is there any kevin video should i watch first ?
good question
but i would work with grid areas
so if use grid we need export all of the component
?
you can try with svg, if you want
you can shove a link inside it, using a
<foreignObject>
but i'm pretty sure it has native support for <a>
then you can position everything as if it was an image
i will show 3 on desktop
and if resize with current approach, it's so broken
ok so there is 2 approach grid and svg ?
there are more, but those are the easiest ones
yes which one is the easiest first let me try that first
you can also have everything as a background image
but i can't click the sign up
?
isn't ?
that will have to be separated
can you give an example tutorial video from grid approach and svg approach
the svg approach: right-click, copy as > copy as SVG
the link will have to be added manually later on
owh ok, is it will responsive and sharp and good ?
well, it depends, a lot
it will scale, but not sure if that's what you want
the svg approach isn't a good approach anyways
ok let's do the grid one
the grid is easier
draw lines around the area of each element
for example, the emoji has an area around it
the weird floaties are another one
the button is another one
wdymean the weird floaties
do you have starter video of how to use grid
i'm familliar with flex
not grid
do you know what a grid is?
like grid paper?
or grid on a design program?
just grid in general
a grid maybe it's a matrix
what i imagine
never heard
never heard too
so, something divided like this
does the hat really have to leave the pink area?
why svg approach not a good apporach, is it because we can't click the button ?
yes it's
and not just that
the text isn't text when you copy, which means that screenreaders can't read it
usually, it's converted to a path to stay close to the design
also, if you need to change something, you have to change everything
owh ok
what do u mean by need change something, i have to change everything ?
imagine you want to move one of those floating thingies
or change the emoji
or just change the text
you will have to change the whole svg
as many times as it shows
and if you changed the code manually, for any reason, you will always have to remember to change it
this can be mitigated with symbols, but that has to be done manually
ahh ok, i think better grid approach, i'm not familliar also with svg things....
how do you want this to be responsive?
3 in desktop 1 in mobile
so desktop > 1000px
mobile < 1000px
so when the card got resize
it's still stay
lock
so, they always stay the same size?
yes it's can shrink maybe if it's to tight ?
or what is the best approach usually ?
honestly, it depends a lot on what you want
to me, this is too much work to implement
it looks pretty, but doesn't look easy
so what is the step by step to solve the issue ?
- export all the component
- put it into the grid
- and then check on resize ?
well, first you have to figure out how you want it to look like at small sizes, like 320px
at mobile size it should be start from 999px
and resize till 0px
can be resizesable
show only one card
on mobile
but at desktop just keep it 400px for example
so, at 999px the card will have what size?
full width
100%
but the original size is about 490px of width
so, it will now be stretched to about 980px?
(assuming some space on the sides so it looks better)
yes
it's
for mobile we only show one card
what will happen to the other ones?
no need
we only 3 on dekstop
and one on mobile
so i just display none
well, if it has to resize, it will be a massive pain in the ass
for dekstop or mobile ?
both
i mean, it will be a pain to make both
but if it has to fill the width of the mobile size, then that's a massive pain
owh ok
i thought the grid would lock the element
it's the sizes of the other elements that make this a pain
not the grid
so then what is the best or efficient way to solve the issue ?
i think the first step to arrange grid is
make it all the element arrange to bottom and give them width
is this will be the fundamental layout (using grid) ?
@ἔρως
the problem is that you want the hat to leave background
that makes everything a lot harder
and the floaties too
ok so what if hat stay inside ?
and which part do you mean floaties ?
i don't get it
i guess the image need relative and make it right 0
and 50%
those weird kite shapped thingies with a background
i mean, inside the circles
so if like this
it will be more easier ?
what are these for?
just styling to make it more crowded
why?
just for better ui
ok so if like this means grid 1fr 1fr
what is this for?
that will be a category
and if im not mistaken, the emoji takes 60% of the width?
around that
and each thing has a different space :/
yes it's
so, going for the easier option
like this, with grid area names
or maybe the top zone should have a different name
or something like this
Here’s a playlist KPow has on grid
https://youtube.com/playlist?list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998&si=l2o03LCwWug0tZ-H
YouTube
CSS Grid videos
The CSS Grid is here, and it's awesome. This playlist is a collection of all the videos I do where I use the CSS Grid, whether it's a tutorial specific to us...