Mobile Responsive issues on transitioning from desktop to mobile view
I'm running into a slight problem trying to figure out why one of my content area wont repond like the others between 400px to 375px.
One of my containers just seems to wont respond at all after i implement css grid 1fr 1fr.
https://codepen.io/dellannie/pen/poqjJWW I attached the code here if anyone can take a look thanks in advance
22 Replies
I would just decrease the container padding for mobile
You are running out of space
plus that big of margin/padding on the container for mobile isn't needed either squishes things too much.
Thanks I was just playing around with that to see if that works. I'll continue to work on that part @b1mind
yea I would decrease it @ about 640px
that is when the content starts to get squishy
Thanks. I was trying 600 and it start to work for me again. Just learn something new haha @b1mind
Yup I'd also increase your other min-width to like 420px
maybe even 470?
trying to remember what the widest mobile is I think its like 435px
that way the grid stacks earlier
From the challenge they had mobile at 375px thats why i have it at 376
Frontend mentor is bs
i swear
mobile should be down to 320px
i just need something to keep learning
fuk their defaults ignore them
lol
no fr
they have some horrible defaults like that
i've been doing that latley espeically the padding and margin always off
they have horrible contrast in lots of the designs too.
none of the designs have consistansty really either
spacings all over the place
Great practice if you just don't follow it 100%
thats what I've been doing. 90% of the time i cant figure out whats going on so I'm making it up on the fly. I just need something to keep practice and build things, Thats whats been working for me lately tutorials alone just dont work @b1mind
Yea honestly I just go on dribble find a challenging design and code it up.
I need to do that too
better practice imo cause then you are having to make the defaults/custom props for styles/colors yourself
also if it does not have a mobile design you have to come up with good breakpoints yourself
I think Kevins Space challenge is the best one FEM has >.>;; def bias
i havent seen that one yet i just founds his channel and this discord like two weeks ago lol
right on ! well keep up the good work!
thanks appreciate it