KevInSol KevInSol - 1 month ago 15
CSS Question

bootstrap hiding grid contents on small screen. Grid > Accordion

I have a four column responsive grid which displays as a grid (each cell with a title and content) until the screen size is less than 768, in which case it becomes an accordion, and all content is hidden unless one clicks on the item's title. I have it working with some jquery to hide/show using the collapse method and class.

http://codepen.io/anon/pen/VKOXJB - top grid

The problem is, to get the content to hide for small screens I had to use the

navbar-collapse
class. This is inserting an unwanted separator, but more importantly, I'm uneasy about using it for something other than a menu, as it may have unintended consequences.

So I tried to mimic it with my own class,
hideifmobile
, but this is not hiding the content when you resize the window below 768px. See bottom grid in the codepen.

Other than that, if anyone has any other comments re the code I would be grateful.

Answer

You are making the main hideifmobile class display: property to enforce the setting using !important in all scenarios. Remove the !important from the display: property in hideifmobile class and your problem will be solved :)

.hideifmobile {
display: block;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;

}