I'm trying to build an info card where if the screen is large, you'd have an image filling the left half of the card and text on the right and if the screen is small you'd have the picture on the top and text on the bottom. I was able to do the first part by adding position: absolute;top: 0;left: 0;bottom: 0;width: 40%, and the setting background-image: src;background-size: cover; and then setting margin-left: 40% on the content. But ultimately this makes it hard for a structure like this to adapt to screen sizes without some javascript. I'd like to avoid using js as much as possible for this so I looked for solutions online and came upon answers such as using a flexbox and using the object-fit css property, but none of those really worked. Here's my code:
.signup-form-wrapper {
display: flex;
align-items: center;
height: 400px;
width: auto;
border: 1px solid rgb(200, 200, 200);
margin: 10px 0px;
}
.img-wrapper {
height: 100%;
width: 50%;
}
.img-wrapper img {
display: block;
max-width: 100%;
height: auto;
}
.content-wrapper {
display: inline-block;
max-width: 60%;
text-align: center;
padding: 0px 14%;
}
body {
height: 100%;
width: 100%;
}<body>
<div class='signup-form-wrapper'>
<div class='img-wrapper'>
<img src='http://www.parkermeridien.com/media/pool_fashion_f.jpg' />
</div>
<div class='content-wrapper'>
<p>Hello, World!</p>
</div>
</div>
</body>
You were on the right track!
Media queries (which you experimented with) are the right way to do this without JavaScript. I went back to using a
background-imageinstead of animg- here's a simple way to do this using floating to keep the elements side-by-side, with a media query (at the bottom of the CSS) that turns off the floating so the elements stack.I also added
box-sizing: border-box;for all elements to prevent padding/borders from modifying the size of elements (which is good practice).