We use cookies to make HubSpot's community a better place. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. To learn more, and to see a full list of cookies we use, check out our Cookie Policy (baked goods not included).
Nov 22, 2022 10:56 PM
Hello, HS Community,
I'm having some trouble with the way an email newsletter displays on mobile devices.
The stacking order is off. Instead of alternating elements (image, entry, image, entry), I get image, entry, image, image, entry, entry.
The desktop email newsletter looks fine.
Is there a way to control the stacking order of elements on mobile devices?
Thank you all.
AK
Nov 23, 2022 6:05 AM
Hi @AKubrin9,
Yes, we can change the stacking order in mobile by using direction. Could you please share the coding or screenshot so that I can let you know how exactly you can do the same?
Thanks!
Jasbir
Nov 23, 2022 11:58 PM
Hi Jasbir,
I took screenshots from my phone, then assembled the pieces into this diagram, and numbered the pieces.
I hope it is clear. Basically, items 3 and 4 are out of order. Reverse them, and all will be well.
How can I do that?
Thanks, and best regards,
Akubrin
Nov 24, 2022 2:18 AM
Hi Akubrin,
I am understanding your concern, actually you have to apply Dir in the columns to reverse them.
In the mobile left column always comes at the top position, so you have to create your 2-Col section as per the mobile layout means which section you want to keep at the top in the mobile you have to keep that section on the left side and using this direction property you can manage your desktop layout, please refer to the attached screenshot.
If this is not clear you can share your code with me, I will add the dir property in your code.
Thanks!
Jasbir
Nov 24, 2022 2:43 AM
Hi Jasbir,
I'm beginning to understand. But how do I access the code? I am using the free Marketing hub. I don't even see a way to edit or export code.
Thank you!
Andy
Nov 24, 2022 3:35 AM
Hi @AKubrin9,
This needs to be done on the backend level.
From Marketing -> Files and Template -> Design Studios you can access your code.
Thanks!
Jasbir