Multi-Column Markdown Plugin ... Any Way To Make It Responsive?

ā€¦ specifically, I want it to automatically go from 2 columns when on my desktop to a single column when on my phone.

Thanks :wink:

Things I have tried

What Iā€™m trying to do

i guess we should raise FR to the dev. anyhow, for immediate solution, try this snippet

/* makes the multi-column goes to next row if screen is less than min width */
.mcm-column-parent-container {
    flex-wrap: wrap;
}
/* set the multi-column to grow n shrink but also has min width, change this width accordingly */
.mcm-column-parent-container .mcm-column-div {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 150px;
}
/* mcm has spacer div, remove it (display: none) when screen is less than 500px (phone usually 450px) */
@media (max-width: 500px) {
    .mcm-column-parent-container .mcm-column-spacer {
        display: none;
    }
}
3 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.