Lavender Question - Alignment (Bug?)

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:

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