How can I make this get smaller as the screen changes sizes?
So I created a container with a nice styling I wanted to ask is it possible for the container to decrease in size as the browser shrinks or is that something I'd have to alter using Media Queries?
53 Replies
You can do something like
width:min(50em, 100% - 5em); or something like that
This is the same as
So, it can never get larger than 50em width, it will be 50em in size until it cannot fit anymore. Then it will be 100% of screen width - 5emAlright let me give it a try
Ok so it has worked
just gotta make some size adujustments
but when I go into the mobile version theres a white line sticking out on the right side of the screen this wasnt there before I createad the container and all
I guess this is probably because that text "develper" is overflowing. For large texts you should use font-size with clamp.
I usually use this tool https://clamp.font-size.app/
So then you can set a font-size to be like minimum 1 rem and max 3 rem and as the browser is resize, it will scale down with the browser, but it can never be smaller than 1 rem or larger than 3 rem. So it's a responsive font-size without the need for media query
Font-size clamp() generator
Generate linearly scale font-size with clamp()
use clamp on that Personal Info too
Ok thank you!
No problem 🙂
Hey quick thing, regarding this, If I wanted to make the width large how can I do that?
I would rather use this
width:min(50em, 100% - 5em); shorter code and does the exact same thing.
But just change the 50em value to something else and the width will be increasedohhh alright ty
ok so Idk what im doin wrong
it's stuck like this
heres the code for the container
What you mean? It doesnt shrink?
not that it doesnt shrink but how do I change the appearance of the container itself? After implementing your suggestion the border-radius is messed up and container size is messed up too
Give me a minute 🙂
Alright thank you!
To make it sound more simple I'd like the code to just look like this img here (container wise) and shrink
This is the code for the input boxes inside that got messed up too
So. Here is a quick example of how i would build it
https://codepen.io/tok124/pen/MWxpLEo
I dont have your exact colors or fonts or anything like that. But hopefully you can look at my code and learn a couple of things from this
Im checkin it our rn
Or actually. Refresh it. I had to fix a couple of things
Great 🙂
Will do thank you! 😃
Sure no problem 🙂 So on very small screens, it will look something like this. You could improve it even more with a media query... But this works for now 🙂
Better then what I had originally
I'll take what I can get and shut my mouth 😂
hehe :p Well. yeah i hope you try to read through my code and try to learn something from it instead of just copy pasting it 🙂 If there is something you dont understand, you can just google it or just ask me and i will try my best to explain 🙂
I havent copied it yet lol
I put it into ChatGPT told it to talk to me like im dumb and explain the entire thing
And hopefully you have realized by now i wrote it in pug and scss but you can compile my code on codepen
Mind sound weird but works like a charm
problem about chatgpt is that it is kinda outdated. It's not aware of things such as logical properties and stuff and it will probably think its errors in your code :p
I've ran into that so much but now that I have a decently better understanding I can get around it
Yeah :p
wouldnt recommend it to a new starter
Yeah hahaha
Hey Tok, So I took my time to restyle this around to my liking but it seems as I ran into an issue and for some reason I cant figure it out
As you see the center button isn't centered is it possible for you to help me with that?
Originally I thought creating a div for the button would have helped and it kinda did but when I "centered" the button it would move it a lilbit to the left
Remember ? Margin-inline: auto ;
Have you watched any of the videos or started any of the courses I recommended ? Learning how to do things correctly instead of banging your head against the wall will save you time and make sure you’re learning correctly, not just going off what jerkoffs like me on discord tell you. Luckily I haven’t seen anyone advising you improperly yet but you never know that someone else was taught correctly.
Yeah
But you should share the code on codepen. You have made a lot of edits to the code i sent.
But yeah, try the code above
I ended up fixing the issue by doing
Yeah, if the button is a still a direct child of that grid container this is what you should do yeah, or just justify-self:center;
place-self:center; will center both horizontally and vertically. But if it doesnt have room to center it vertically it will obviously only center it horizontally. But justify-self:center; is only for horizontal center
Gotchu, Also Tok if you don't mind me asking what are some good beginner project ideas you recommend? I wanna create some projects more of Front-End less Backend that aren't insanely difficult
I personally started with navbars. There is really so many different ways to make navbars and there are so many cool effects you can add to it. and then you can try make it responsive and stuff. It is super fun, i've been making like 5 navbars per day for 15 years 😂 😂 I never get tired of it. But... You can also take some FEM Challenges. Those are some great projects to get started with. Another fun thing to make is photo galleries and make it so you can click the image to see like full size and make arrows on left and right side so you can click to switch images. Then you can add like cool transitions and stuff. And maybe even add in swipe for the phones so you can swipe to switch images. And add hotkeys so you can click right/left on keyboard to switch images too. There is a lot you can do with photo galleries really, so yeah, that is also super fun to make
Honestly a photo gallery would be an amazing idea
Yeah 😄
Since im still a senior I have an oppertunity to go to SM To go to the SnapChat HQ and I wanted to creat a portfolio and projects (Even tho im still a beginner) and get a possible internship
Cool ! 😄
Just the thing is I don't wanna make projects that everyone makes especially things like Calculators or Weather apps they've become so common it's easy to search on YT but Ig in my case since Im still young it might be ok
@hrphyn you kind of want to have projects that are similar in nature though imo.
unique enough that it catches the eye, but at this stage you need to prove solid coding skills and the ability to learn from others.
the business doesnt want to have to correct everything that you do because you have your own spin on things that nobody else can understand
I understand what you're saying would it be fine for you to elaborate on the topic some more? Like specific coding projects you'd recommend to any beginner how they can learn from other people and understand the code literally anything you consider usefull to let someone like me be aware of
a TODO app while done millions of times before demonstrates a lot of basics that you will find used in different apps and situations.
There are systems and principles for a reason. They ensure that developers understand code they read without having to reach for a dictionary
I understand that may be out of scope currently because you havent really delved into JS yet but in the same way, A hamburger nav bar is a design that you will see on most sites. so make one of those.
1 BIG suggestion from me is if you are wanting an internship at a company. Try to recreate their company's website.
unless you are interested in getting into front end development though I wouldnt delve too much into html and css
JS is something that will be used in most front end stacks for companies and will also be used in the backend . so learning JS, PHP, or JAVA will provide you a better foundation than getting gud at HTML and CSS
This is true yeah, better focus on JS and php/java if you want to find a job.
I personally only focus on CSS because i love it. Not because i want to find a job. But yeah, if you want to find a job, learn JS and then learn some frameworks for JS such as react
for work I wouldnt be focusing on React. I would be looking into Angular more than React