When screen decreases in size background move's oddly
Hey there, So I had help creating this calculator to be a bit more responsive but I ran into an issue so when I decrease the size of the space around the calculator the background coloring moves with it how can I fix this?
19 Replies
hard to say without a codepen/demo of it.
If I had to guess ..
vw xDsorry lol!
I think It may be a width issue 🤦
Let content determine width
I just caught onto it after messing around in Inspect Element I'll still send a CodePen
maybe use a min/max but don't use
vw units to do it.Yea just remove the width from .calculator and remove overflow hidden from body
Alright let me give it a try!
Oh perfect!
I have one more question if you don't mind
In the smallest width using inspect element the calculator looks like this (Got some button tweakin to do) What would you recommend I do to make the calulator somewhat smaller so it looks more appealing?
Ok so removing the width actually messed up the entire thing
It became incredibily gigantic
You can put some margin around it?
then give it a max-width: maybe?
I wouldn't use % but rem or px
em?
🤷♂️ you gotta make that choice
sigh -
the choice is confusing I wont even lie I still don't fully understand how to use em/rem
I mean if you are using rem for fonts and user changes font you will want it to fit.
I've watched kevins videos regarding it but its confusing
I see you used my suggestion from this post.
https://discord.com/channels/436251713830125568/1206832624778092614
Thanks for NOT responding to it, you're welcome!
Use clamp on fintsuze and padding or width on vuttons in ems
Im so sorry lmao