Hide grid item on mobile/tablet

GenerateBlocks
#1

Screen Shot 2021-05-06 at 1.17.44 PM
Screen Shot 2021-05-06 at 1.17.44 PM4234×2478 848 KB

I have enabled Hide on tablet and Hide on mobile for one container block in a grid. This hides the gb-container div, but not the column. As a result, the column still occupies space, and pushes the next container/grid item down.

Is there a way to hide the entire column? Or is there a better way I should build out this content? I am using GB Pro + GP Premium.

What I’m trying to accomplish is avoiding having redundant items in close proximity. In this case it’s sidebar items that are moved below the page content on tablet and mobile, that essentially replicate the footer items I’m trying to hide. The client runs Mediavine ads so I can’t just turn off the sidebar items.

#2

Hi there,

new Grid options will be added in a future update that will provide additional Flex Options including Flex-grow and Flex-shrink - this will allow empty columns to collapse when their content is set to display none.

In the meantime you would use the nth-child CSS pseudo property to hide the column. For example:

Give the the parent Grid Block a custom CSS Class eg. custom-grid then add a little CSS to hide the nth-child column:

.custom-grid .gb-grid-column:nth-child(2) {
	display: none; 
}