This is what I'm trying to do. Yellow box on left goes to the right at 768px and the height is set at 250px. I want the text to runaround/below the yellow box to fill the width of the parent container. I don't think Flexbox can do this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Profiles</title>
<style>
* {
box-sizing: border-box;
}
body {
font-size: 15px;
line-height: 28px;
font-family: helvetica, sans-serif;
}
.profile-wrapper {
display: flex;
justify-content: space-between;
background-color: #FBF9FA;
}
@media screen and (max-width: 768px) {
.profile-wrapper {
padding: 30px;
}
}
figure {
margin: 0;
padding: 0;
width: 50%;
/* background-image: url(images/profile_1.jpeg);*/
background-size: cover;
background-position: center, center;
background-color: yellow;
}
@media screen and (max-width: 768px) {
figure {
order: 2;
height: 250px;
width: 250px;
}
}
.profile {
width: 50%;
padding: 40px 50px;
}
@media screen and (max-width: 768px) {
.profile {
padding: 0;
}
}
.profile h2 {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="profile-wrapper">
<figure>
</figure>
<div class="profile">
<div class="profile-text">
<h2>Lorem ipsum dolor.</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam corporis.</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet animi atque facere incidunt ipsam laudantium maxime modi recusandae repellendus. Cupiditate deserunt eaque inventore, ipsum iure laboriosam officiis perspiciatis voluptates. A accusantium ad beatae corporis, ducimus enim eos error ipsam iusto laboriosam laborum laudantium libero quaerat repudiandae rerum tempore velit veniam veritatis. Aut commodi ea eos molestiae quidem repellendus repudiandae!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, ut vero. A ab accusantium aspernatur beatae commodi culpa deleniti dolorem dolores dolorum ducimus eos error esse, fugiat hic itaque labore libero magni necessitatibus nobis odit perferendis perspiciatis praesentium provident quaerat quam, qui quibusdam ratione, reiciendis rem sed sit soluta tempore tenetur voluptas voluptate voluptates voluptatibus? Atque autem commodi consectetur consequatur ducimus explicabo, iste magnam minima non quibusdam quidem quo sint sunt. Dignissimos doloribus libero porro saepe tempora veniam veritatis vitae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, ut vero. A ab accusantium aspernatur beatae commodi culpa deleniti dolorem dolores dolorum ducimus eos error esse, fugiat hic itaque labore libero magni necessitatibus nobis odit perferendis perspiciatis praesentium provident quaerat quam, qui quibusdam ratione, reiciendis rem sed sit soluta tempore tenetur voluptas voluptate voluptates voluptatibus? Atque autem commodi consectetur consequatur ducimus explicabo, iste magnam minima non quibusdam quidem quo sint sunt. Dignissimos doloribus libero porro saepe tempora veniam veritatis vitae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto aspernatur dolore, eius eligendi eveniet laboriosam nemo pariatur praesentium rem? Ad dolorum ipsum quibusdam repellendus vel voluptas! Eum, fuga reiciendis!
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto commodi, doloribus esse et facere inventore laborum modi nam, nihil quam repellat, tempore ut voluptate.</p>
</div>
<!-- end profile-text -->
</div>
<!-- end profile -->
</div>
<!-- end profile-wrapper -->
</body>
</html>
92
Replies
.
AdChoices