Can someone help me understand web responsiveness with CSS? I would like to move the card img below the form once I change the browser width.
[https://i.ibb.co/5BrX8zK/Screenshot-11-08-2020-at-18-39.gif]
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (7)
Hey @Sidd, maybe this will help you!
css-tricks.com/snippets/css/a-guid...
You can use the flex-wrap property to move the card image below your form. There are many more ways to do this though. You might want to check out this article:
developer.mozilla.org/en-US/docs/L...
First you need to know is how to structure your elements on a web view.
You have some easy ways for reaching that job nowadays such as css flexbox or css grid. You can also use bootstrap, mustard ui or another framework.
It's about structure from the beginning and not something you add over a basic structure so you'll need to recode your layout.
I've an article about building a flex layout to fit all projects that you can check to solve your drama. :)
Use flex layout, it will be very straight forward. Especially when used with bootstrap 4
In this scenario, as maik already said, display:flex is your best friend. Much simpler, cleaner and fast way to do it.
CSS media queries is all you need
youtu.be/2KL-z9A56SQ
Look for bootstrap framework, is going to help you to accomplish that responsiveness
I don't really think if it is good to advise someone to use Bootstrap instead of code things themself and have a chance to understand how things work.