Adjust text for desktop and mobile visibility

Responsive design ensures your website adapts and looks great on various devices, from large desktop screens to small mobile phones. One key aspect of this is controlling the visibility of content based on the screen size.

The "Hide on Mobile" and "Hide on Desktop" Features

Using the "Hide on Mobile" and "Hide on Desktop" features, you can create a truly responsive website that delivers an optimal experience to all users, regardless of their device.

These features allow you to create different versions of your content, showing specific elements only on certain devices. This is crucial for optimizing the user experience on each platform.

Follow the steps below to adapt the text for both phone and desktop visibility:

1. Access Campaigns 
2. Click to Edit
   
   
3. Open Design page
4. Edit Email content
   
   
5. We will make some hidden elements for each design: mobile and desktop.
6. Customize it for desktop use (and hide an element for mobile use). Select the Element that looks good on Mobile.
7. Scroll down to the right side and select Hide on Desktop. This ensures that this specific text block is not visible when the website is viewed on desktop computers.
8. Save
9. Close
   
10. Add the Text box in
    
11. Type in the needed text. (You might also choose to duplicate this text block and then edit the duplicate to make it more mobile-friendly (e.g., adjust font size and line spacing).)
12. Centralize it
13. Make the font size bigger
    
14. Go to the mobile version and select the duplicate text block (or any element) you want to hide in the desktop view.
15. Hide the bigger text for Mobile. This ensures that this specific text block will not be visible when the website is viewed on mobile devices.
    
16. Use the preview option in the bottom left corner to check how it looks on desktop and mobile versions:
    
17. Check both versions by switching the view here:
    

Key Benefits of Using These Features:

• Improved Mobile Experience: By hiding desktop-specific elements, you prevent clutter and ensure a clean, user-friendly mobile layout.
• Optimized Content: You can tailor content to each device, making it more readable and engaging.
• Faster Loading Times: You can improve page loading speed by hiding unnecessary elements on mobile.
• Enhanced Control: You have precise control over the content displayed on each device.
  
  In summary, the "Hide on Mobile" and "Hide on Desktop" features allow you to create a truly responsive website that delivers an optimal experience to all users, regardless of their device.