Great point! If you want to ensure two columns on larger screens and keep it single-column on smaller ones, here’s how you can adjust it with Tailwind:
<div class="columns-1 lg:columns-2 gap-5 text-justify">
<img src="/resources/aqua.jpg" alt="Description of the image" class="float-left mr-4 w-36 h-auto">
Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action. The text will start in the first column and flow into the second, maintaining a neat and tidy look.
</div>
This setup ensures:
columns-1 for a single column on smaller screens.
lg:columns-2 for two columns on large screens and above.
If there’s anything else you need or any more tweaks, just give me a shout!
It sounds like Tailwind might be acting a bit shy. Let’s double-check the setup. Make sure Tailwind CSS is properly linked in your project. If it’s all set, here’s a quick recap of the Tailwind setup:
<div class="columns-1 lg:columns-2 gap-5 text-justify">
<img src="/resources/aqua.jpg" alt="Description of the image" class="float-left mr-4 w-36 h-auto">
Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action. The text will start in the first column and flow into the second, maintaining a neat and tidy look.
</div>
This should give you:
columns-1 for a single column on smaller screens.
lg:columns-2 for two columns on large screens and above.
If it’s still not working, double-check your Tailwind setup or try clearing your cache. If you need more help, just holler!
Ah, the elusive break-inside property! It can be quite handy for controlling how content breaks within columns. If you’re looking to keep elements from breaking awkwardly, you can use it like this:
<div class="columns-1 lg:columns-2 gap-5 text-justify">
<img src="/resources/aqua.jpg" alt="Description of the image" class="float-left mr-4 w-36 h-auto break-inside-avoid">
Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action. The text will start in the first column and flow into the second, maintaining a neat and tidy look.
</div>
The break-inside-avoid class helps prevent the image from splitting across columns. Make sure your Tailwind setup includes this utility, or you might need to add it manually.
If you need more help or want to tweak it further, just give me a shout!
The CSS version works in the individual post, but the Tailwind version doesn’t.
I tried doing it on the Post template page using a custom component and using {{item.body}} to bring in the text, but that doesn’t seem to work. Not sure if that is supported or I ‘m just not using the proper syntax.
Yes that is exactly what I’m trying to do with the column code as well. Setting it in the template means less coding in the markdown file, so I’m perfectly fine with all the blog posts being formatted the same way.
Thanks, I put the float component on the page and followed the instructions. It populates, but it is only showing one column. I looked in the html code and don’t see any column code. Am I missing something?
Let’s double-check the setup. Make sure Tailwind CSS is properly linked in your project. If it’s all set, here’s a quick recap of the Tailwind setup: