Lavender Question - Alignment (Bug?)

[Justin]

Hello All,
Just have a quick question, not sure if this is a bug or something I screwed up. I am trying to create 3/4 category "blocks" to align on a row. This is in addition to the widget side bar. No matter what I do, I can't get them to align, and they keep breaking down to the following line. Anyone have any thoughts?

Bug: https://github.com/NodeBB/nodebb-theme-lavender/issues/44

[riteshsanap]

@Justin
your problem is with Bootstrap actually, you are using wrong classes, take a look here for proper classes to use with Twitter Bootstrap
http://getbootstrap.com/css/#grid-options

Here is the picture when i made col-md-6, and they work fine

[Justin]

@riteshsanap Yeah, still not having any luck. The default Lavender "Custom Class" is: col-md-3 col-xs-6. I am assuming it breaks it down for viewing on different devices, as follows:

Custom Class: col-md-3 col-xs-6
Desktop: col-md-3
Mobile: col-xs-6

I am entering col-md-3 col-xs-6, which should allow me to align 3 categories, assuming the grid column width is 12. Correct?

[riteshsanap]

no @Justin it will allow you align 4 categories on one row,

BTW also check in other browsers sometimes browser sends specific headers that mess with responsive designs, so it might be good to check.

if nothing else is working, just redownload the theme from github and install it.

[Justin]

@riteshsanap I might be missing it, but I thought the point of modifying the custom classes, was so that we could choose the width of the blocks, allowing us to determine the how many blocks we wanted per line?

When the page loads, they're all aligned properly for about 3 seconds, then they all break down to the following line.

[riteshsanap]

@Justin how about checking the Page source and confirm which classes are being added to the theme (for google chrome right click on the page and select view page source or inspect element)

[Justin]

@riteshsanap Yes, it is applying the following:

<div class="col-md-12 col-xs-6 category-item" data-cid="5" data-numRecentReplies="0">

That is exactly what I am entering in the Custom Class and this is also displaying across all of the major browsers.

[julian]

@Justin col-md-12 will render as 100% width on a desktop browser. That's why your first category spans the length of the screen. When you resize down to mobile device width, it'll switch to half of the screen.

Usually, you want to go the other way round, give this a try: col-lg-3 col-sm-6 col-xs-12

4 to a row, 2 to a row on tablets, 1 a row on phones

[Justin]

Right, I was hoping to resize each category based on priority of the topic. I've tested entering col-lg-3 col-sm-6 col-xs-12 and the categories still break down to the following level, like they don't fit. Also same as before, when the page loads they're aligned, after 3/4 seconds they break down to the following line.

[julian]

@Justin This sounds like the masonry library is not working quite right.

If all of the categories have the same "custom class", it's fine, right?

Have you tried without the sidebar widget?

[Justin]

@julian Alright, so I changed every category to col-lg-3 col-sm-6 col-xs-12, then they all work. But as soon as I change one of the categories over to: col-lg-12 col-sm-6 col-xs-12, to make one category full width. They all break again. Any ideas? Same thing with the sidebar on and off.

[julian]

@psychobunny Do you have any thoughts on why Lavender is doing this?

[agarcia17]

yeah I've ran into this problem too, here was my post

[Justin]

@agarcia17 Did you get the empty div to work? Did it fix your issue?

[psychobunny]

Hey all, I've resolved this issue as of Lavender v0.2.8 - let me know if you still experience it. Make sure your full width categories have the class col-lg-12