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