[Antimatter] 5 columns desktop - single column rendering on mobile devices?

I'm working on a modified Antimatter theme.

I had a modular template made for antimatter that rendered content in 3 columns in desktop, displaying the content in a single column on mobile devices.

Now I would like to create a modular template where I have 5 or 6 columns, rendering also as a one column on mobile. The problem is that the 5 columns stays 5 columns on mobile devices.

What and where do I have to add to the site in order to display the 5 columns also as one column on mobile?

See screenshot for actual mobile rendering of the 5 column template. Any help very much appreciated!

Do you use tables?
Maybe you can give more info/code of your templates/.
Would be very helpful.

Thanks for your reply.

I'm not using tables. I'm not even sure what information to give you, since I had the modification made by someone else.

Is there a simple way to render columns into one single column on mobile?

Themes based on antimatter should automatically render in one column on mobile devices.
Is your site live?
You could post the content of your template used for 5 column layout.

@werdi

@werdi:
[...] since I had the modification made by someone else.

I would first suggest to ask the 'someone else', who was able to alter Antimatter from a 1-column blog-item list into a 3-column item list, to alter the template again into a 6-column item list.... After all, he seems to be knowing what he is doing.

Second, without knowing which stylesheets have been included (Antimatter has many...) and without knowing how the 3-column blog template looks like and how your 6-column template looks like, there is not much to say...

I'm left to guessing... Could it be a pure-u-1 is missing in the wrapper around each blog item.

Thanks for your reply and I can feel your irritation.

The person who did the modification is not up for "minor work".

The issue is about a modular template for antimatter, not the blog. Since I'm not a pro, I'm not sure what stylesheets are part of the modification.

Thanks arank for your reply. The site is live @ test.learahelbader.com/de/vita - The template in question is further down "CD-Einspielungen". Just above the bit you can see the original 3-column template which was made for me. The code for this 3 column template is:

<div class="modular-row columns">
    {% if page.header.title %}<h2 class="center">{{page.header.title}}</h2>{% endif %}
    {% for column in page.content|split('<hr />') %}
    <div class="column">{{ column }}</div>
    {% endfor %}
</div>

The content for the template of the 5 column you can see in the code. All styling is placed in the core.scss file, but I have no access to it, I'm just able to overrule the code by adding it on the custom.css file.

Thank you pamtbaau, that was really helpful. It worked.

I understood that it would be the most logical thing to ask the developer who did it in the first place. I was not offended, not at all.

Thanks again!

Glad your issue got solved.

I can imagine you would like to 'wrap' the 5-column section into a 3-column or 2-column section when the page is not visited from a mobile but a wider tablet, or when the phone gets rotated. That makes the page a bit more responsive to the device being used.

In that case you could change the css to:

/* On screen smaller than 768px, display 3 columns */
@media only all and (max-width: 47.938em) {
    .modular-row.cd .column {
        /* Use 50% for 2 columns */
        width: 33%;
    }
}

/* On screen smaller then 568px, display 1 column */
@media only all and (max-width: 35.5em) {
    .modular-row.cd .column {
        width: 100%;
    }
}

Just play around and see what you like...

NB. You might want to mark the thread as being solved.

Hello pamtbaau,

I have a further question about this topic with the columns.

There seems to be something not working properly when I add content.

The template is set for 5 columns - when I keep adding more than 5 items, they don't align properly.

The site is live on http://test.learahelbader.com/de/vita#cd

Do you have a few minutes to help me out what am I missing?

I seem to have found the solution, thanks!

And I only looked at it and saw all is well....