Hover Box in Accordion

vistasme

hi

I'm trying to make a grid of hoverboxes in 4 columns inside an accordion using shortcodes. 

How do i ensure that on tablet/desktop it shows up in 4 columns with equal spacing, but on mobile it fills it responsively? Currently one box takes up the entire width of the accordion.

http://yugo.incmagazine.me/menu/

The accordion named two.

Thank you.

vistasme

Just to be clear, the current image siz eis like 1000x1000 px, but even if i change the size it is arranged in a vertical ribbon with no space between each other. (as seen in the accordion named 'one')

Pablo

Hi,

You shouldn't do it in a accordion list, because it won't look nice.

It can be done, but only with normal images, and they will be very small.

http://prntscr.com/kva9ta

But, you have to recreate it in Column item.

http://prntscr.com/kva9yi

https://themes.muffingroup.com/be/theme/shortcodes/content-blocks/#accordion

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

vistasme

Hi Pablo,

I tried this and it leads to a few issues.

1. there is no space between any images.

2. I wanted the hover box specifically so that if a user hovers on an image, the hover picture has text on it giving a backstory of the subject of the picture. This is not possible on the current column.

3. On mobile there is no responsiveness -  if i set one row to have 4 pictures, even on mobile it shows 4 pictures, and their size becomes too small.

Please help.

You can find the test accordion in the same page.

Pablo

It's not possible to make it with this item.

Accordion block is made for text, not for images.

To make it working, you have to make a lot of modifications of BeTheme files.

We do not support theme files modifications.

Cheers

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

vistasme

I see.

I tried using a plugin to do so. https://wordpress.org/plugins/accordions/

But the accordion doesnt show up properly despite following their instructions.

https://puu.sh/BwUpd/987f4c3d10.png

https://puu.sh/BwUpA/0e01fe9dc2.png

https://puu.sh/BwUpH/32933cd2e9.png

Pablo

Hi,

Sorry, but we did not test this script/plugin with the theme. Our policy states that we do not support third party plugins or custom code so unfortunately, we cannot be of any help to you.
Also, we cannot recommend any plugins other than the ones we support. You can find the list on this page, in the sidebar:
https://themeforest.net/item/betheme-responsive-multipurpose-wordpress-theme/7758048

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next