htmlcssiosmjml
MJML template rendering incorrectly on mobile
I am currently using MJML-sandbox to render some icons.
The code snippet I am testing is:
<mj-section>
<mj-column padding="0" padding-top="30px">
<mj-image src="https://www.gstatic.com/webp/gallery/1.jpg" href="https://mjml.io" width="32px" padding="4px" align="left" />
</mj-column>
<mj-column padding="0" width="49%" padding-top="30px">
<mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="0" align="right">
<mj-social-element name="facebook" href="https://mjml.io/">
</mj-social-element>
<mj-social-element name="google" href="https://mjml.io/">
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
</mj-social-element>
</mj-social>
</mj-column>
</mj-section>
Desktop view:
Mobile view:
When on desktop view, the icons render in a single row(what is expected), but when on mobile view, the icons on the right wrap to the next row. How do I fix this? (Using Safari browser, to test how it renders on IOS.)
Solution
Apparently wrapping mj-group around the columns fixes this issue.
<mjml>
<mj-body>
<mj-section>
<mj-group>
<mj-column padding="0" width="13%" padding-top="30px">
<mj-image src="https://www.gstatic.com/webp/gallery/1.jpg" href="https://mjml.io" width="32px" padding="4px" align="left" />
</mj-column>
<mj-column padding="0" width="85%" padding-top="30px" css-class="center-content-on-mobile">
<mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="0" align="right">
<mj-social-element name="facebook" href="https://mjml.io/">
</mj-social-element>
<mj-social-element name="google" href="https://mjml.io/">
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
</mj-social-element>
</mj-social>
</mj-column>
</mj-group>
</mj-section>
</mj-body>
</mjml>
- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome