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

Support Themes & Styling
1

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!

23
Bildschirmfoto 2018-08-03 um 13.56.23.png400×550 42.9 KB

1 Like
2

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

3

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?

4

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.

5

@werdi

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.

6

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.

7

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.

8

@werdi Thanks for sharing the live website. I can play with that to find a solution…

If you add the following to custom.css, the colums will collapse to a single column when the width of the browser becomes less then 47.938em.

Also, .modular-row.cd needs to be clear-ed to show its correct size, else the footer will not display beneath it, but halfway over it.

@media only all and (max-width: 47.938em) {
    .modular-row.cd .column {
        width: 100%;
    }
}

.modular-row.cd:after {
    content: "";
    display: table;
    clear: both;
}

While I’m at it…

  • I also noticed an error at the site. The browser tries to load a stylesheet MyFontsWebfontsKit.css but cannot find it:
    <link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">
    I think this should be fixed in /user/themes/mariabusque/partials/base.html.twig.
  • I presume the default language of the website will be German. If you would like to get rid of the language code ‘/de/’ in the urls for German visitors, you might have a look at Default Language Prefix
  • Looking the the network traffic, it show that stylesheets and javascripts are not bundled and minified. Bundling and minification will enhance performance.
    Maybe this is because I’m looking at a test site and will bundling be switched on in production.

By the way…
Did you feel offended by my remark “After all, he seems to be knowing what he is doing.” If so I apologise, that was not my intention. It just seemed logical to me to turn to the designer because he knows his design best.

1 Like
9

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!

10

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.

1 Like
11

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?

12

I seem to have found the solution, thanks!

13

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

1 Like