Blog, Website & Page Publishing

BLaanen
Participant

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

SOLVE

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 

icon text

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!

0 Upvotes
1 Accepted solution
Jnix284
Solution
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

@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.

 

 

 


maka Agency

View solution in original post

5 Replies 5
BLaanen
Participant

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

SOLVE

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.

0 Upvotes
HKraebel
Member

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

SOLVE

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

0 Upvotes
BLaanen
Participant

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

SOLVE

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. 

0 Upvotes
Jnix284
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

@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


maka Agency
Jnix284
Solution
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

@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.

 

 

 


maka Agency