Dynamics Community Forum Thread Details

MS Classes Wrap Content on Mobile

Dynamics templates have div tags with a class called wrap-section.

Content inside these divs will stack on mobile, even if they're in a table. The table will stack instead of staying horizontal.

There's another class called no-wrap-section that prevents this from happening.

For example, in my social footer, I have to use this class to keep all of the icons horizontal, instead of stacking.


            
                
                    
                        
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                        
                                                            Connect with NIQ

                                                            
                                                                
                                                                    
                                                                    
                                                                    
                                                                    
                                                                    
                                                                    
                                                                    
                                                                    
                                                                    
                                                                    
                                                                     
                                                                    
                                                                
                                                            


                                                            Unsubscribe and email preferences
                                                            Terms of use
                                                            Views as web page
                                                            Forward to a Friend
Privacy policy
                                                            Copyright ©2023 Nielsen Consumer LLC, All rights reserved.

What can I do in cases where I need to have a bit of both? For example, I tried using it here to keep the menu links horizontal, but they stack.

On another note, the classes are present in the code, but the styles aren't available. They must be global styles.

Hello.

Those 2 classes are use to select if the sections should have columns one bellow the other or next each other on mobile email clients.

I'm not sure what is the behavior you want to achieve, but I suggest using options "Show on mobile" and "Show on desktop" to create design for mobile and desktop, it will probably be easier.
So my guess in this case would be to have this as desktop section and unselect "Show on mobile". And for mobile create section with two columns, image element in one and 3 text elements one bellow the other column and unselect "Show on desktop" and "Wrap columns on mobile".
You can play with the options we have to create the design you need. This can probably be done by custom coding, but I think it's probably easier to just create different sections and just hide them and show them as needed.

One more thing, If you want to see the full styles we add to the emails, you can inspect email in the Preview tab and see the style tag there:

Hope this helps.

Best regards,
Jelena

Quick Links

Leaderboard