CSS alignment problem + not responsive at all.
https://sensational-biscotti-7e017a.netlify.app
what did i do wrong ? i gave margins to adjust the position of text and input box but turns out it is not what i shoud have done. plus it doesn't adjust when it's windowed it has to go full screen. i'm beginner in HTML CSS so do tell me what else i did wrong.
thank you so much i appriciate your help.
codepen : https://codepen.io/samgon/pen/LYvBbrY
2 Replies
Can you be a bit more specific? What element is not working and how do you want it to be?
If we talk about the big BERRY text in the middle, you could make the font size shrink when the screen does or we could make it wrap to the next line so it fits on smaller screens for example.
Few things:
On classes container, berrry,coming you use:
justify-content: center;
align-items: center;
These are not valid without setting display flex.
Its not a smart idea to align content using margins for responsiveness. Better use flex and align it that way.
Classes: container, coming
It should stay back as a background layer
and .berry .heading .join .btn are the top layer
I had very hard time aligning them that’s why i used margins ‘cause they weren’t coming on top of .container and .coming