Image/Icon Boxes Reponsive Width

  • 8 January 2022
  • 1 reply


Wonder if you also have this issue with icon and image boxes ( Perhaps also applicable for most of the elementor pro widget except columns )

The Issue: 
When using Image Box or Icon Box side by side for desktop, and try to make them 50% ( for tablet breakpoint ) to make a 2column Image Box the responsive feature simply doesn’t work. ( Even copy and pasting styles from one ImageBox to another seems to be buggy )

It also has issue for mobile breakpoint custom width

Site settings: 
Theme: Hello 
Active Plugins: Elementor 3.5.3 and Elementor Pro 3.5.2 
( I also test it in localhost to make sure for fresh Wordpress install along with the minimal required plugins )

Settings for Icon Boxes:
Desktop: 20% width (5 col)
Tablet: 50% width (2 col)
Mobile: 100% width (1 col or vertical stack)

1 reply

I wonder if this is similar to the problem I’ve been having over the past two days.  Each time I set up a two or three column section and put  icon boxes or just a headers + text boxes into each column,  the end column get truncated.  I’ve tried setting up widget width, verifying the global settings, deactivating all plugins, trying safe mode, emptying cache, regenerating CSS and data… I don’t remember ever having a problem like this before.  (Theme Hello).

In the screenshots below you can see how it is supposed to look on the bottom row and how it actually  looks in preview on the top row.

There doesn’t seem to be a pattern to it.  Three column or two columns; three lines of text or four lines of text. 

The only time they work is when you put no text in the boxes.

I might just have to do a workaround unless someone has an answer to this.