@RTX3070Submitted about 3 years ago
Latest solutions
Latest comments
- @D-RaceSubmitted about 3 years ago@dannyboi07Posted about 3 years ago
You should look into what media queries are in css and responsive web design (this is a concept in frontend web dev).
Media queries are how you set different versions of a layout for different screen sizes.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Best links for you to get up and running with basic media queries.
1 - @mlaksiSubmitted about 3 years ago@dannyboi07Posted about 3 years ago
Just add another media query that sets the layout in the intermediate duration between the desktop version and mobile version. Good responsive sites that I've seen have three media queries on average. You could use 4. Desktop, laptop, tablet and mobile.
It would be nice if there was another media query that modifies the layout around the time when the Sign up button breaks into two lines.
Also don't modify the body element and include it into the layout. Instead have a master card container, set the widths etc. Then you could flex the body element and set centering css properties.
0 - @hyde-brendanSubmitted about 3 years ago@dannyboi07Posted about 3 years ago
You can transition the height property with css. Use 'transition: height <insert animation time>; You also have to add it to two places, the closed state css class of the div (or whatever you placed it in), and the expanded state css class.
But since you used max-height, I don't think it can be done. I tried a lot. To have animation I went the JS way of adding extra ems to the answers that had a lot of words, depending on the screen width.
The font-size needs to be a bit bigger tho. Btw how hard was it to manage those images?
0 - @Christ-KevinSubmitted about 3 years ago@dannyboi07Posted about 3 years ago
Hey Kevin. I'm pretty new to this stuff too. Just a couple of weeks back I was absolutely dumb at layouts and general css. Content from YT creators like Kevin Powell got me going the right track.
I recommend that you try the below link, from freecodecamp and Kevin Powell on Responsive web design. It's the basics. But Kevin explains the reasoning behind why he chooses certain things when he creates the layout, which I think is the best thing to learn from this video.
https://www.youtube.com/watch?v=srvUrASNj0s&t
Marked as helpful0
