We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

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

  • #11661
    Avatar photo[anonymous]

    Hi there

    I want to make the typical 3 columns section you have on almost every website.

    In WP it this feature

    One image

    on title

    on description

    X 3

    In smartphone mode they are diplayed one after the other instead.

    Thks for your help

    Avatar photo[anonymous]

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

    In a helper ?

    Avatar photo[anonymous]


    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">
    <td style="width: 33.2942%;">
    <h4>Colonna 1</h4>
    <p>Mixtape enim proident eiusmod. Lumbersexual ethical shabby chic semiotics.</p>
    <p>Readymade palo santo mumblecore tumblr celiac, kogi occupy la croix.</p>
    <td style="width: 33.2942%;">
    <h4>Colonna 2</h4>
    <p>Chicharrones mlkshk dolor irony synth bicycle rights meditation. Chia pariatur nostrud, semiotics mustache labore culpa narwhal taiyaki cupping.</p>
    <td style="width: 33.2977%;">
    <h4>Colonna 3</h4>
    <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>

    Custom CSS:

    /* Table 3 columns responsive */
    .table-3-responsive, .table-3-responsive td {
    border: 0;
    .table-3-responsive tr{
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* break point */
    @media (max-width:900px) {
    .table-3-responsive tr{
    grid-template-columns: 1fr
    Avatar photo[anonymous]

    In my example the column width percentages don’t matter because they are overridden by the CSS.

    I placed a breakpoint at 900px to change from three to one column.

    The example uses a simple “CSS grid system” which can be significantly improved.

    You can use other tags, but using an html table allows you to have a fairly consistent display in the post editor.

    Avatar photo[anonymous]

    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="" 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.

    Avatar photo[anonymous]

    Dear @giampiero ,

    thks for all your answers.

    We have been the boostrap way. Also we have iincluded ALL the boostrap JS.

    We have been from 99% speed on google insight to 89%  🙁

    Do you know the impact of only including the required lib lik you just provided the code ?

    Especially on the “blocking”

    Avatar photo[anonymous]
    [anonymous] wrote:

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

    In a helper ?

    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: .

    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!

    Avatar photo[anonymous]

    One more thing: I see that the example you sent uses float, but you could also use grids or flexbox. Find whatever method / tutorial / look / code snippet that you like and will be easy for you and your team to maintain.

    Avatar photo[anonymous]

    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:

    Since you opted for the bootstrap solution, here’s a list of free bootstrap components you can simply copy/paste in your page: