How to Hide and Show multiple columns - Support | Kriesi.at

Tagged: columns, grid, Hide, layout, responsive, show

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
March 10, 2016 at 4:42 pm #596362
Vicken
Participant
Hi Team,
I am having a bit of a problem trying to hide and show columns. I need to place 4 1/2 columns into one section/row. However I want to hide 2 of them, then show them after 767px media query, and hide the other 2. I noticed on an old post that Joshu had identified the .first class which is helpful if there are only 2 columns, but I have 4. I tried the following but it has not worked.

Desktop —
```
Play: div#topgreenzone .flex_column:nth-child(1) { display: none; } hide

Win: div#topgreenzone .flex_column:nth-child(2) { display: block; } show

Play: div#topgreenzone .flex_column:nth-child(3) { display: none; } show
```
767 media query —-
```
Play: div#topgreenzone .flex_column:nth-child(1) { display: none; } show

Win: div#topgreenzone .flex_column:nth-child(2) { display: block; } show

Play: div#topgreenzone .flex_column:nth-child(3) { display: none; } hide
```
How can I achieve this?
March 10, 2016 at 6:19 pm #596456

Andy
Inactive Moderator

Hi Vicken!

at first check out this: kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
and then you can hide/show it using media queries: css-tricks.com/snippets/css/media-queries-for-standard-devices/

Regards,
Andy

March 10, 2016 at 6:27 pm #596468
Vicken
Participant
Andy,
Does this link article refer to functions in enfold theme, enfold child, or wordpress includes?
- This reply was modified 8 years, 1 month ago by Vicken. Reason: To correct words in order to increase efficiency of read/response
March 10, 2016 at 6:50 pm #596493

Vicken
Participant

Nevermind I placed it in the enfold theme and worked

March 12, 2016 at 6:28 am #597137

Rikard
Keymaster

Hi,

Great, glad you got it working. Please let us know if you should have any more problems on the topic.

Thanks,
Rikard
Author

Posts