Responsive
I made this design using position: absolute on every single element and moved it using top, left, bottom, right, and, of course, it is not responsive. That's what I need help with. Can I do something so that it just decreases in size, like just decreases? I know it will get hard to read on mobile devices, but how can it decrease? That's what I am asking. Any other methods are also welcome to make this page responsive.
66 Replies
you've positioned everything in a way that works for a desktop resolution
you can look into better tools, like grid, or just write the positions manually for all elements, for all size stops you want to support
Actually this is not really a good way to go about it. Use a grid and try to choose only one value either width or a height, set the other one as auto. Also, positioning everything absolute is not a good idea, its harder to maintain the flow for responsive. Try adding it to code pen so we can see better what is actually going on.
Actually this is not really a good way to go about itthat's a nice way to put a terrible idea in
Ill put it in code pen once i get on
sorry guys went to the hospital so i was just too busy today anyways here is my code pen
my position stands: this is a terrible idea and there's no good way to make it responsive with position absolute
yeah my bad i should have used flexbox
or grid
this looks like a grid thing
isnt grid like used for table like things
no, that's a
<table>i am an absolute beginner
a grid is to put things ... in a grid
perfectly aligned with other elements
grid confuses me i watched a video once and there were like axis 1,-1,2,-2 i didnt understand those
that's if you want to put stuff in specific grid spaces
more often than not, you don't need to touch that
mind if you can send me a youtube video for a grid?
and where can i practice grid like i practiced flexbox with online games but where to practice grid?
i don't have any materials that teach it
i completed my CSS and HTML course should i start making a project or move on with javascript and bootstrap?
np
https://jsfiddle.net/u7ko8zar/ <-- here's a basic grid
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
1fr is just 1 part of the size that's availablehttps://jsfiddle.net/u7ko8zar/1/ <-- if you check this version, you see that the 1st one is half the size of the 2nd one, and the 3rd one is the same size and the 1st and 2nd ones combined
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
which is what
grid-template-columns: 1fr 2fr 3fr; does:thanks:
KPow has a whole playlist on grid. There are tons of resources out there to learn about and practice and play W css grid. Plus the dev tools have flex and grid specific tools as well. https://youtube.com/playlist?list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998&si=SvFdq3Q5BINuow80
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...
Tysm
i strongly suggest using firefox to practice grid
you mean the browser?
how does that help?
the grid tools are leagues and bounds better
lets just say that chrome has the shittiest barest minimalistically minimal to say it "supports" grid and flex
This is not the case anymore
Only thing FF devtools* has over chrome for grid is better name line placement, but chrome has it on toggle.
how can i toggle it on?
then i wont have to download firefix right?
If your not using names lines or areas don't worry to much about it yet, but you have the layout tab in devtools
oh yeah
it still sucks compared to firefox
firefox shows you all the layout and the col/row numbers
So does chrome
Again it does nothing more now
oh, it does now
it didnt a few months ago
Has for years
it sucked a lot
really?
ive always struggled with chrome
I use edge so they have even better dev tools team
But shouldn't matter chrome still does it
thats one thing that microsoft did well with ie: the dev tools were decent, if the browser didnt crash
it's pretty underwhelming for flex, but does the thing
Yea edge devtools helped get subgrid working in chrome and the selector perf tab
Does FF do something different? Pretty much same with flex too 🥲
i have completed css and html what would you guys suggest now? make a project or just move on with javasript and bootstrap
More CSS and html
advanced?
more and more and more
always more
make a project, then another and then another
i just made it and its like so bad
i hate it
redo it
its a never ending journey
I've been learning modern web dev for past 4 years 🥲 still didn't complete html/CSS/jss
Never complete 🫠
didnt you understand it or didnt get the time?
It never ends lots to learn
firefox has this, which is useful for when the items wrap or overflow or dont touch the entire width
ill try to land a remote internship hopefully
can i?
Who knows
it would be hard but there is nothing that makes me stand out from the market
also a newbie
I can say that remote work for beginners is very rare
uhhh i literelly dont understand 50% of what you guys say
DO NOT (and i cant stress this enough) DO NOT ACCEPT UNPAID INTERNSHIPS
why? i will learn alot tho
thats showing the layout of a flex element. here's another example, with flex-grow, flex-shrink and flex-basis set to 30px
you wont learn anything, you will be a pawn to do the boring menial shit nobody cares about, because you are literally slaving yourself
you think you will code? you will write documentation until your keyboard begs you to stop
whats the best option then? freelnace? i cant do that either right now because i am a beginner or can i?
your scaring me
you can do documentation for an open source project, or even try to tackle bugs or write examples of how to use xyz
Getting way ot though
ill apply for paid internships
i agree
ill make another project with the css and html i learned so far
i just need to find a beginner friendly project
you will find