Sign in
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

  • This topic has 8 replies, 4 voices, and was last updated 2 weeks, 5 days ago by .
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #11661
    Avatar photobobee

    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

    #11662
    Avatar photobobee

    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

    #11680
    Avatar photogpsblues

    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
    }
    }

     

    #11684
    Avatar photogpsblues

    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.

    #11690
    Avatar photogiampiero

    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.

     

    #11727
    Avatar photobobee

    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”

     

     

    #11731
    Avatar photocandidexmedia
    bobee 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=”bbp-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!

    #11732
    Avatar photocandidexmedia

    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.

    #11736
    Avatar photogiampiero

    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

     

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.