Blog, Website & Page Publishing

BLaanen
Participante

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

resolver

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!

1 Solução aceita
Jnix284
Solução
Participante de valor | Parceiro Diamante
Participante de valor | Parceiro Diamante

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

resolver

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

 

 

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

Exibir solução no post original

6 Respostas 6
JessGBI
Participante

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

resolver

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.

JessGBI_0-1696876207915.png

 

0 Avaliação positiva
BLaanen
Participante

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

resolver

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 Avaliação positiva
HKraebel
Membro

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

resolver

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

0 Avaliação positiva
BLaanen
Participante

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

resolver

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 Avaliação positiva
Jnix284
Participante de valor | Parceiro Diamante
Participante de valor | Parceiro Diamante

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

resolver

@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


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

Jnix284
Solução
Participante de valor | Parceiro Diamante
Participante de valor | Parceiro Diamante

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

resolver

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

 

 

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin