topic Re: How to prevent two modules in a row from stacking on mobile? in Blog, Website & Page Publishing

How to prevent two modules in a row from stacking on mobile?

BLaanen — Thu, 29 Sep 2022 00:00:04 GMT

Hi there HS Community,

Does anyone know how to prevent two modules in a row from stacking? I'm not very developer savvy and am working in the confines of a theme template.

My issue is that I have several sections of that use an icon module next to a block of text. This creates a great checklist like this:

icon text

But on mobile this stacks as

icon

text

icon

text

icon

text

Ideally the icon and text look just as they when the screen width is greater than 767px, even if the text has to wrap within the column.

Any suggestions?

This is the page I'm working on: https://communications.conversationdesigninstitute.com/en-au/rmit-cxd

Thank you in advance for your suggestions!

Re: How to prevent two modules in a row from stacking on mobile?

Jnix284 — Thu, 29 Sep 2022 01:41:21 GMT

@BLaanen are the icons and texts in separate columns using separate modules?

The reason it is stacking is because that is the basic responsive behavior. If you want side-by-side, you would need to use a more advanced module that's coded to work that way.

One thing you could do is create a smart rule (by device type) where you center the icons on mobile which would flow a little better.

Re: How to prevent two modules in a row from stacking on mobile?

BLaanen — Thu, 29 Sep 2022 19:37:51 GMT

Thanks Jennifer for your response. Yes they are in separate columns as part of a single row.

I'll take a look at the smart rule as a temporary solution and start researching how to create an advanced module. Hopefully I can find a way to add a pre-built version into the module options.

Re: How to prevent two modules in a row from stacking on mobile?

HKraebel — Mon, 31 Oct 2022 17:59:34 GMT

Did you find or create module that stopped the stacking on mobile? Trying to solve this for myself at the moment.

Re: How to prevent two modules in a row from stacking on mobile?

BLaanen — Mon, 31 Oct 2022 18:32:39 GMT

Ultimately I couldn't find a solution and centered the icons so that it looked more logical.

I tried out a bunch of modules, included paid options, from Hubspots theme market place, and none were any good.

Re: How to prevent two modules in a row from stacking on mobile?

Jnix284 — Mon, 31 Oct 2022 18:44:30 GMT

@HKraebel you could always try a basic table via source code in rich text, it is not usually recommended because it isn't "responsive" but since that is what you want...

Here's an outline of the code:

<h2>VIDEO TITLE</h2> <p>Showcase your awesome service with quality video content. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p> <table style="width: 100%;"> <tbody> <tr> <td style="width: 50%;"> <h3>27K</h3> </td> <td style="width: 50%;"> <h3>1.2MIO</h3> </td> </tr> <tr> <td style="width: 50%;">Lorem ipsum dolor sit amet, <br>consetetur sadipscing elitr, sed<br>diam sit amet, consetetur elitr.</td> <td style="width: 50%;">Lorem ipsum dolor sit amet, <br>consetetur sadipscing elitr, sed<br>diam sit amet, consetetur elitr.</td> </tr> </tbody> </table>

and a link to a test page where you can see that the columns in the row remain side-by-side

Re: How to prevent two modules in a row from stacking on mobile?

JessGBI — Mon, 09 Oct 2023 18:31:19 GMT

We are experiencing the same issue. There's plenty of space for the green positive emoji and the red negative emoji to be on one line in the mobile version, but it defaults to stacking. I will upvote this thread, as well.