Menu

Examples

Hide something on the mobile devices

This example shows how to hide or change something in the template on the mobile devices.

Switch to mobile view by clicking on the 'smartphone' icon on the toolbar and you will see that the image will not be shown on mobile screens.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Revolvapp</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/revolvapp.css" />
    </head>
    <body>
        <!-- element -->
        <div id="myemail"></div>

        <!-- js -->
        <script src="/your-folder/revolvapp.js"></script>

        <!-- call -->
        <script>
        Revolvapp('#myemail', {
            editor: {
                path: '/your-path-to-revolvapp-folder/',
                template: '/your-path-to-template-file.html'
            },
            image: {
                upload: '/my-backend-upload/'
            }
        });
        </script>
    </body>
</html>

Usage

There are two options to hide or change something on the mobile devices.

The first way is to use pre-defined classes:

  • mobile-hidden - to hide element or block on the small screens
  • mobile-left - to align content in the block by left edge
  • mobile-center - to center content in the block
  • mobile-right- to align content in the block by right edge

For example, add the mobile-hidden class to some block:

<re-block class="mobile-hidden">
    <re-text>My text</re-text>
</re-block>

Now this block will be hidden when you see the email on the movile devices.

The second way is media queries. Just add the style tag between re-head tag in the template and write mdeia query for small screen.

<re-html>
    <re-head>
        <re-title>My email</re-title>
        <re-style>
        @media all and (max-width:639px) {
            .mobile-block {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
        }
        </re-style>
    </re-head>
</re-html>

NB: !important is required when you specify rules for small screens.

Then add the specified class to your elements in the template, for example: 

<re-block class="mobile-block" padding="40px">
    <re-text>My text</re-text>
</re-block>

Ok, the block will have 16px padding on the left and right edges on the mobile devices instead of 40px padding on the desktop version.