I have the following code:
.aligned {
display: flex;
align-items: top;
}
.p{
padding: 15px;
}
@media screen and (max-width: 375px) {
.aligned {
display: inline;
top: 15px;
}
}
img{
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "2014 2009";
}<img src="https://previews.123rf.com/images/lekanto/lekanto1708/lekanto170800012/84171612-country-road-leading-to-the-forest-morning-picutre-made-during-sunrise-.jpg" align="left" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>So when you run the code above, I would like the exact same format of the code and everything to be the exact same when the user is viewing it on a large screen, but on devices such as phones/tablets or anything smaller, this should be my expected output:
I know the output in this image does not match with text and image I have in my code, but it is essentially the same idea.
On a phone/tablet/smaller device, I would like the image to be placed top and text right under
On a larger device, I would like the output to be what is of the code above
What seems to be the problem: I added a aligned class to make the text aligned beside the image but it doesn’t seem to work if you want responsive. How I fix that?
Advertisement
Answer
Can we start by deciding what things should look like on a wide device? At the moment the image element is given fixed dimensions which don’t correspond to the actual image aspect ratio, and an ‘old’ attribute align is also being used.
I suggest we stick to CSS and say, perhaps that on wider screens the image should take up n% of the width. You can decide the value(s) of n and have different break points if you want, but there is no sense in having the image take up 360px width on a 376px viewport, which is what would happen now – there needs to be a reasonable amount of space left for text.
The CSS property float was designed to allow images to ‘float’ with text. So float:left will put the image on the left and any subsequent text will use the space available on the right, and if it’s too long it will go under the image.
For a small device, where it makes no sense to have the image and text alongside each other we can just make the image take up 100% of the width of the viewport and the text will go under it.
Using float in this way (which it was designed for) there doesn’t seem to be a need for flex as well.
Here’s the simplified snippet to get you started – you may want to change media break points to have different % widths of the image.
.p{
padding: 15px;
}
img{
border-sizing: border-box;
width: 30%;
border: 5px solid #555;
float: left;
margin-right: 10px;
}
@media screen and (max-width: 375px) {
img {
width: 100%;
}
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "2014 2009";
}<img src="https://previews.123rf.com/images/lekanto/lekanto1708/lekanto170800012/84171612-country-road-leading-to-the-forest-morning-picutre-made-during-sunrise-.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>