3-column content on blog page with Quark theme?

Support Themes & Styling
1

Hi,

How do you control the number of columns in Quark blog list pages?

So far, I’ve tried by:

  • changing the grid size in Quark theme options > no difference
  • changing the bricklayer.css, class bricklayer-column-sizer > no difference
  • changing the class of the div with item id, still no luck

columns class appears only in the layout.html.twig file, but I don’t see any part of the code that might have an impact on this, so I suspect it is somehow coded in the bricklayer.js. However, the <div> with class bricklayer-column-sizer looks empty, so I don’t really know what to do.

ef5ksCT.png1322×904 263 KB

Any ideas or suggestions?
TIA

1 Like
2

@marcocevoli

Add the following to your favourite file where you tweak Quark’s style:

@media screen and (min-width: 980px) {
    .bricklayer-column-sizer {
        width: 33.3%;
    }
}

I recognise your quest…

  • First I was looking at the different templates to find where the columns were generated. Nope not here…
  • Noticed the script bricklayer added by ‘blog.html.twig’, which appeared to generate/manipulate the columns. Minified code only…
  • Inspecting the css for div ‘bricklayer-column-sizer’, I noticed the ‘width: 50%’. Changed that in ‘custom.css’ and it worked.
  • Searched on repo of Quark on github, but not code for bricklayer either…
  • Googled for bricklayer.js and found the Quick Start.

Ahh… now I understand…

3 Likes
3

I followed the same quest and got to your same point.
Your suggestion did the trick. What I don’t understand, however, is:
how can the bricklayer-column-sizer class have any effect, if it refers to an empty <div> (see previous image)?

4

I haven’t looked at the internals of ‘bricklayer.js’ but my guess is:

  • it looks for the width of .bricklayer
  • it looks for the width of .bricklayer-column-sizer
  • it divides the two and you have the number of columns.
  • it divides the number of blog items by the number of columns and knows how many items should be put in each column.
1 Like