Front page index : how to make a section with 3 responsive column

Hi,

you can use a simple 1-row, 3-column table (with custom class) that you make responsive with CSS.
I recommend using the html editor:

<table class="table-3-responsive" style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 33.2942%;">
<h4>Colonna 1</h4>
<p></p>
<p>Mixtape enim proident eiusmod. Lumbersexual ethical shabby chic semiotics.</p>
<p>Readymade palo santo mumblecore tumblr celiac, kogi occupy la croix.</p>
</td>
<td style="width: 33.2942%;">
<h4>Colonna 2</h4>
<p></p>
<p>Chicharrones mlkshk dolor irony synth bicycle rights meditation. Chia pariatur nostrud, semiotics mustache labore culpa narwhal taiyaki cupping.</p>
</td>
<td style="width: 33.2977%;">
<h4>Colonna 3</h4>
<p></p>
<p>Woke polaroid jianbing cillum scenester blog gatekeep locavore tote bag. Street art 3 wolf moon voluptate kale chips you probably haven't heard of them sunt mukbang kogi craft beer la croix biodiesel neutra salvia.</p>
</td>
</tr>
</tbody>
</table>

Custom CSS:

/* Table 3 columns responsive */
.table-3-responsive, .table-3-responsive td {
border: 0;
width:auto!important;
}
.table-3-responsive tr{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
/* break point */
@media (max-width:900px) {
.table-3-responsive tr{
grid-template-columns: 1fr
}
}

Hello @bobee,

unfortunately multi columns layout can be achieved in Publii only by using custom HTML code.

If you know bootstrap you can add the grid system only by adding this link on the header of your publii website (go to “tools & plugins” > “custom HTML”) :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap-grid.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Now you can use the source code button in the WYSYWYG editor (or the HTML block, or the Markdown editor) to add your html columns using Bootstrap Grid System.

[anonymous] wrote:

I found things like this, but how would you implement it ?

In a helper ?

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_three_columns_responsive

There are numerous ways of displaying. Here’s the easiest method:

Copy everything inside the style tag (minus the actual style tag):

Go to Tools & Plugins > Custom CSS, and paste the CSS. Save your changes.

Next, copy the divs:

Using the WYSIWYG Editor or Block Editor, paste the code.

For the WYSIWYG use the Source code button:

For the Block Editor, use the HTML Block:

There you have it!

Now, if you want to make this more reusable because you use it a lot and have the technical skill, I’d recommend making the different div + class names a custom format in the WYSIWYG Editor. @<span class=”f-author-name”>b0fh</span> has a really great comment on another with details on that: https://forum.getpublii.com/topic/tinymce-wysiwyg-editor-adding-more-blocks-html-tags-to-the-dropdown/#post-11703 .

Additionally, if you’re creating a custom theme for others to use, make sure to add the css rules tothe main.css file in your site’s theme directory.

Happy blogging!

Hi @bobee

I wanted to write my reply, but it seems that wordfence is a little touchy this afternoon, this is the 5th time I try!

to mitigate the impact of loading the css try this: https://www.holisticseo.digital/pagespeed/async-css/

Since you opted for the bootstrap solution, here’s a list of free bootstrap components you can simply copy/paste in your page: https://easyfrontend.com/components/ui/services/html/bootstrap?page=1