Hi folks,

The following page renders as expected in desktop view (ie full menu at the top of the screen).
https://www.henwig.com/test/build5/index.html#features
In desktop view the features and benefits info aligns in neat rows of 4 icons.

However, as soon as the design breaks into the mobile view (once the hamburger icon appears), the 'Benefits & Features' icons shift into rows of 2 icons and they do not align properly when using Firefox (I've tested on Mac and PC, using the latest version of Firefox).

It is just Firefox that is posing a problem. Is is this something in the page design that is causing the problem or is this a weird Firefox thing?

I've attached two screen grabs showing what I'm seeing in Firefox. A third screen grab with Brave rendering the page that shows the expected mobile alignment is also attached.

Any help greatly appreciated.

Charles

If you don't want to have the headings break into two lines, you need to use a smaller font size for small viewports, or make shorter headings. Another thing you might want to do, is setting a max-width for the containers feature-individual, in order to stop some paragraphs spreading out leaving very little space for their neighbours.

The problem is that it is only firefox that renders the thingies differently I suspect it's to do with the widths of the paragraphs/ containers being set to a % value which was a problem before with the old firefox, which I thought they at Mozilla had fixed.