I am facing a challenge with my component box layout, where I need the image to be aligned on the left or right with the content vertically centered. Additionally, it should be responsive for mobile, with the image on top and content at the bottom. Check out my attempt: Jsfiddle Attempt: 1 Code Link
I attempted using CSS properties like .wrapper with display set to table, and .img-wrap, .content-wrap as table-cell, which worked well on desktop. However, on mobile, each box needed the image on top and content below. Here is my second attempt: Jsfiddle Attempt: 2 code Link
My goal was to achieve a combination of the results from attempts 1 (for mobile) and 2 (for desktop), ideally maintaining the same HTML structure. You can view Attempt 1 HTML above.
Update:
I also tried another approach by following a technique I found on CSS Tricks. Initially, it seemed to center vertically, but as I added more text content, it stopped working. Can anyone help understand why? View Attempt 3 here: Jsfiddle Attempt: 3 code Link
HTML - Attempt 3
<div class="wrapper">
<div class="img-wrap left">
<img src="http://lorempixel.com/400/400/" alt="" />
</div>
<div class="content-wrap">
<p>Lorem Ipsum...</p>
</div></p>
</div></p>
</div>
</div>
<div class="wrapper">
<div class="img-wrap right">
<img src="http://lorempixel.com/400/400/" alt="" />
</div>
<div class="content-wrap">
<p>Lorem Ipsum...</p>
</div>
</div>
CSS- Attempt 3
* {
box-sizing: border-box;
}
.wrapper:before, .wrapper:after {
display: table;
content:'';
}
.wrapper:after {
clear:both;
}
.wrapper {
Width: 100%;
height:auto;
position :relative;
max-width: 800px;
display:block;
margin: 30px auto;
background: #f3f3f3;
*zoom:1;
}
.wrapper:before {
Content:'';
display: inline-block;
vertical-align: middle;
}
.img-wrap {
width:30%;
}
.left {
float:left;
}
.right {
float: right;
}
.img-wrap img {
display:block;
Width: 100%;
}
.content-wrap {
Display: inline-block;
width: 70%;
height: 100%;
Padding:20px;
Vertical-align:middle;
position: relative;
}
.content-wrap:before {
Content:'';
display: inline-block;
vertical-align: middle;
}
@media screen and (max-width:480px) {
.right, .left {
Float:none;
}
.wrapper:before {
display: none;
}
.img-wrap {
width: 100%;
}
.content-wrap {
width:100%;
}
}