If you have a two-column stack on your website, it'll wrap to show as a one-column stack on your mobile. See how mobile responsiveness works on Rocketspark.
If you want to keep it the same layout as a two-column stack on mobile, you have the option to show that stack as a two-column by using the column wrapping controls for mobile. Here are the steps:
- In your Dashboard Editor, hover over the stack you want to make the edits on and click on the colour wheel to go to Stack Specific Design Options.
- Click to open the Width & Spacing menu.
- Move the toggle from DESKTOP to MOBILE.
- In the Column Wrapping dropdown, select Two columns on mobile. Now you can see in the mobile preview the content is displayed in two columns. But likely, you will see unaligned text with image due to the massive font size for the heading.
NOTE: While you are in the Width & Spacing mobile controls, it's also recommended to reduce your left and right Internal Column Spacing to below 10.
- Click open Headings & Paragraphs.
- Reduce your corresponding heading font size to a small pixel, e.g, in this example, the Medium Heading is reduced to 18 px and the Paragraph is reduced to 14 px.
NOTE: It's recommended to have short text if you want to show a stack as two columns on mobile i.e., no more than two lines. You can see the changes you've just made for mobile Headings & Paragraphs in the preview alongside straight away.
- Click Save changes.