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?

Rrmon So I created a container with a nice styling I wanted to ask is it possible for ...

Tok124 (CSS Nerd)•1/18/24, 2:53 AM

You can do something like
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 - 5em

TTok124 (CSS Nerd)You can do something like `width:min(50em, 100% - 5em);` or something like that ...

rmonOP•1/18/24, 2:53 AM

Alright let me give it a try

rmonOP•1/18/24, 2:54 AM

Ok so it has worked

rmonOP•1/18/24, 2:54 AM

just gotta make some size adujustments

rmonOP•1/18/24, 2:55 AM

rmonOP•1/18/24, 2:55 AM

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

Rrmon but when I go into the mobile version theres a white line sticking out on the ri...

Tok124 (CSS Nerd)•1/18/24, 2:58 AM

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()

Tok124 (CSS Nerd)•1/18/24, 2:59 AM

use clamp on that Personal Info too

rmonOP•1/18/24, 2:59 AM

Ok thank you!

Tok124 (CSS Nerd)•1/18/24, 2:59 AM

No problem

rmonOP•1/18/24, 3:02 AM

Hey quick thing, regarding this, If I wanted to make the width large how can I do that?

Rrmon Hey quick thing, regarding this, If I wanted to make the width large how can I d...

Tok124 (CSS Nerd)•1/18/24, 3:07 AM

I would rather use this shorter code and does the exact same thing.
But just change the 50em value to something else and the width will be increased

TTok124 (CSS Nerd)I would rather use this `width:min(50em, 100% - 5em);` shorter code and does the...

rmonOP•1/18/24, 3:11 AM

ohhh alright ty

rmonOP•1/18/24, 3:12 AM

ok so Idk what im doin wrong

rmonOP•1/18/24, 3:12 AM

rmonOP•1/18/24, 3:12 AM

it's stuck like this

rmonOP•1/18/24, 3:13 AM

heres the code for the container

Rrmon it's stuck like this

Tok124 (CSS Nerd)•1/18/24, 3:13 AM

What you mean? It doesnt shrink?

rmonOP•1/18/24, 3:13 AM

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

Rrmon not that it doesnt shrink but how do I change the appearance of the container it...

Tok124 (CSS Nerd)•1/18/24, 3:14 AM

Give me a minute

rmonOP•1/18/24, 3:14 AM

Alright thank you!

rmonOP•1/18/24, 3:14 AM

To make it sound more simple I'd like the code to just look like this img here (container wise) and shrink

rmonOP•1/18/24, 3:14 AM

https://cdn.discordapp.com/attachments/1197370029755355287/1197370030174781521/image.png?ex=65bb04bd&is=65a88fbd&hm=747059f6ab363cd3b75063a36fb1c01bdb873270fb3f5c5af0bcedbdd3c1a1f0&

rmonOP•1/18/24, 3:15 AM

This is the code for the input boxes inside that got messed up too

Rrmon Alright thank you!

Tok124 (CSS Nerd)•1/18/24, 3:25 AM

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

CodePenTim

MWxpLEo

...

rmonOP•1/18/24, 3:27 AM

Im checkin it our rn

Tok124 (CSS Nerd)•1/18/24, 3:27 AM

Or actually. Refresh it. I had to fix a couple of things

Rrmon Im checkin it our rn

Tok124 (CSS Nerd)•1/18/24, 3:27 AM

Great

TTok124 (CSS Nerd)Or actually. Refresh it. I had to fix a couple of things

rmonOP•1/18/24, 3:27 AM

Will do thank you!

Rrmon Will do thank you! 😃

Tok124 (CSS Nerd)•1/18/24, 3:29 AM

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

rmonOP•1/18/24, 3:29 AM

Better then what I had originally

rmonOP•1/18/24, 3:29 AM

I'll take what I can get and shut my mouth

Rrmon I'll take what I can get and shut my mouth 😂

Tok124 (CSS Nerd)•1/18/24, 3:30 AM

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

TTok124 (CSS Nerd)hehe :p Well. yeah i hope you try to read through my code and try to learn somet...

rmonOP•1/18/24, 3:31 AM

I havent copied it yet lol

rmonOP•1/18/24, 3:31 AM

I put it into ChatGPT told it to talk to me like im dumb and explain the entire thing

Tok124 (CSS Nerd)•1/18/24, 3:31 AM

And hopefully you have realized by now i wrote it in pug and scss but you can compile my code on codepen

Rrmon I put it into ChatGPT told it to talk to me like im dumb and explain the entire ...

rmonOP•1/18/24, 3:31 AM

Mind sound weird but works like a charm

Rrmon I put it into ChatGPT told it to talk to me like im dumb and explain the entire ...

Tok124 (CSS Nerd)•1/18/24, 3:32 AM

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

TTok124 (CSS Nerd)problem about chatgpt is that it is kinda outdated. It's not aware of things suc...

rmonOP•1/18/24, 3:32 AM

I've ran into that so much but now that I have a decently better understanding I can get around it

Rrmon I've ran into that so much but now that I have a decently better understanding I...

Tok124 (CSS Nerd)•1/18/24, 3:33 AM

Yeah :p

rmonOP•1/18/24, 3:33 AM

wouldnt recommend it to a new starter

Rrmon wouldnt recommend it to a new starter

Tok124 (CSS Nerd)•1/18/24, 3:33 AM

Yeah hahaha

TTok124 (CSS Nerd)Yeah hahaha

rmonOP•1/18/24, 5:05 AM

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

rmonOP•1/18/24, 5:05 AM

rmonOP•1/18/24, 5:06 AM

As you see the center button isn't centered is it possible for you to help me with that?

rmonOP•1/18/24, 5:11 AM

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

Rrmon Originally I thought creating a div for the button would have helped and it kind...

curiousmissfox•1/18/24, 11:23 AM

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.

Tok124 (CSS Nerd)•1/18/24, 5:59 PM

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

TTok124 (CSS Nerd)Yeah ```css button { display:block; margin-inline:auto; } ``` But you shoul...

rmonOP•1/19/24, 1:04 AM

I ended up fixing the issue by doing

Rrmon I ended up fixing the issue by doing ```css place-self: center; grid-colum...

Tok124 (CSS Nerd)•1/19/24, 1:07 AM

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