Skip to main content
Contributor I
May 27, 2024
Solved

How can I show the mobile version in the desktop version? 

  • May 27, 2024
  • 2 replies
  • 742 views

How can I show the template of the mobile version in the desktop version? 

Like I want to display the mobile version on both desktop and mobile. How can I do that?

    This topic has been closed for replies.
    Best answer by eCom2Win_Agency

    Hey @sajeda 

    Welcome to the community!

    Just making sure I understand you correctly. You want to display the Mobile version on both desktop and mobile, correct?

    Unfortunately, there's no direct toggle to force the mobile view in the desktop preview within Klaviyo's email editor, but you can use a workaround to achieve this:

    1. Media Queries: Use CSS media queries in your email's HTML to force the mobile styles to apply. You can set the same styles for all screen sizes to ensure the mobile design is displayed regardless of the device.

    2. Browser Developer Tools: In your browser, you can simulate a mobile device to see how your email looks. Here’s how you can do it in Chrome:

      • Right-click on your email preview and select "Inspect" to open Developer Tools.
      • Click the device toolbar icon (looks like a phone/tablet) to toggle the device mode.
      • Select a mobile device from the dropdown menu to view your email in mobile mode.
    3. Responsive Design Tools: Utilize tools like Litmus or Email on Acid, which allow you to preview emails in various devices and clients. These tools often provide more accurate renderings of how your email will look in different environments.

    Here are some helpful Klaviyo resources and forum discussions that might help you further:

    Hope this helps :)

    2 replies

    eCom2Win_Agency
    Expert Problem Solver II
    May 27, 2024

    Hey @sajeda 

    Welcome to the community!

    Just making sure I understand you correctly. You want to display the Mobile version on both desktop and mobile, correct?

    Unfortunately, there's no direct toggle to force the mobile view in the desktop preview within Klaviyo's email editor, but you can use a workaround to achieve this:

    1. Media Queries: Use CSS media queries in your email's HTML to force the mobile styles to apply. You can set the same styles for all screen sizes to ensure the mobile design is displayed regardless of the device.

    2. Browser Developer Tools: In your browser, you can simulate a mobile device to see how your email looks. Here’s how you can do it in Chrome:

      • Right-click on your email preview and select "Inspect" to open Developer Tools.
      • Click the device toolbar icon (looks like a phone/tablet) to toggle the device mode.
      • Select a mobile device from the dropdown menu to view your email in mobile mode.
    3. Responsive Design Tools: Utilize tools like Litmus or Email on Acid, which allow you to preview emails in various devices and clients. These tools often provide more accurate renderings of how your email will look in different environments.

    Here are some helpful Klaviyo resources and forum discussions that might help you further:

    Hope this helps :)

    Generate 20% - 40% of your eCommerce store revenue with https://rebrand.ly/eCom2Win!
    sajedaAuthor
    Contributor I
    May 28, 2024

    @eCom2Win_Marketing Thank you so much bro! That helped!