Float Text around and image
Has anyone gotten the CSS correct to float and image left or right using the magazine template? I have made a few attempts but either I break something else or not displayed correct. Basically want to wrap text around an image on a post
The Magazine template does not yet have all of the layout features implemented. I will follow up here as soon as they are.
Answered 3 years ago · Edit answerHi, I've just started using the Magazine template. I'm using float in a page to wrap text around images. Is that what you mean?
Answered 2 years ago · Edit answerI have been trying to do this too using the layout functionality, but I can't figure it out. Can you please post a markdown snippet?
Answered 2 years ago · Edit answerI'm not sure a Markdown snippet would help. So in my fork of Magazine, in the css-theme.css file, I just created two image classes — rimage and limage — plus the clearfix style. Because I wanted borders around my images, I defined those here as well:
.rimage { float: right; margin-top: 5px; border-top: 2px solid #b3cde0; border-left: 2px solid #b3cde0; border-right: 2px solid #b3cde0; border-bottom: 2px solid #b3cde0; }
.limage { float: left; margin-top: 5px; border-top: 2px solid #b3cde0; border-left: 2px solid #b3cde0; border-right: 2px solid #b3cde0; border-bottom: 2px solid #b3cde0; }
.clearfix { overflow: auto; }
Then in my Markdown, I include the following html:
<div class="clearfix">
<p><img class="limage" src="../Images/_rocket.jpeg" style="width:33%;height:33%;margin-right:15px;">The text you intend to wrap around the image goes here...</div>
I'm not a coder or developer, so your mileage may vary...
Answered 2 years ago · Edit answer