How do I test the reponsiveness?

Hi,

I'm currently trying to implement a template which has a responsive css mediaquery embedded. When i'm uploading it, the normal layout seems to work fine but the responsive part of it does not work or i can't seem to test it with the preview option (by scaling the browser). Should I see the responsiveness in the preview when scaling the browser? The template has been built up in divs and not in a table structure.

I didn't use any inline styling but i used the <style></style> tags to define the selectors. At first i've included the css for the normal structure and after, the media query. Could you check if my syntax is correct?

<style>   
    * {
        font-family: "myriad pro", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    h1 {
        display:inline;
        font-size:48px;
        font-weight: normal;
        color:#7f1328;
        }   
   
    h2 {
        font-size:14px;
        font-weight: normal;
        color:#6d6d6d;
        width:400px;
        margin-bottom:30px;
        }   
   
    h3 {   
        display:inline;
        font-size:36px;
        font-weight: normal;
        color:#7f1328;
        width:400px;
        }   
       
    body{
        padding:0;
        margin:0;
        width:100%;
        text-align:center;
    }   
   
    .container{
        display:inline-block;
        width:755px;
        height:100%;
        text-align: center;
    }
   
    .header{
        margin: 0 0 10% 0;
        width:740px;
        height:77px;
        position:relative;
        background-color:#7f1328;
        color:#fff;
        display:block;
    }
   
    .headercontent{
        text-align:center;
        position:relative;
        display:block;
    }
   
    .tmclogo{
        position:relative;
        float:left;
    }
    .nb_txt{
        position:relative;
        float:right;
        font-size:20px;
        margin-top:4%;
        margin-right:10px;
    }
   
    .tmccontent{
        text-align: center;
        position:relative;   
        width:740px;
        margin:5px;
        border: 1px solid #eaeaea;
    }
       
    .section{
        display:inline-block;
        position:relative;
        width:740px;
        margin:0 auto;
        height:100%;
        text-align: center;
    }   
     
     
    .textcontent{
        margin:0 23% 0 23%;
        text-align: center;
       
    }
       
    .infobutton{
        font-size:14px;
        text-align:center;
        position:relative;
        width:170px;
        height:28px;
        padding:20px 50px 20px 50px;
        color:#fff;
        top:5%;
        background-color:#cacaca;
        text-decoration: none;
    }
   
    .infobutton:hover{
        font-size:14px;
        text-align:center;
        position:relative;
        width:170px;
        height:28px;
        padding:20px 50px 20px 50px;
        color:#fff;
        top:5%;
        background-color:#7f1328;
        cursor:pointer;
        text-decoration: none;
    }
   
    .infobutton a:link{
        color:#fff;
        text-decoration: none;
    }
   
    .infobutton a:active{
        color:#fff;
        text-decoration: none;
    }
   
    .infobutton a:hover{
        color:#fff;
        text-decoration: none;
    }
   
    .infobutton a:visited{
        color:#fff;
        text-decoration: none;
    }
   
    .image{
        position:relative;
        display:block;
        margin-top:5%;
    }
   
    .footer{
        width:100%;
   
    }
    .footertext1{
        text-align: center;
        font-size:10px;
        color:#b6b6b6;
        margin-bottom: 20px;
        margin: 0 0 20px 0px;
        white-space: nowrap;
    }
   
    .footertext2{
        text-align: left;
        font-size:10px;
        color:#b6b6b6;
        margin: 0 0 20px 0;   
    }
   
    .footertext3{
   
        text-align: left;
        font-size:10px;
        color:#b6b6b6;
        margin: 0 0 20px 0px;   
    }
   
    .linebreak{
        width:100%;
        margin:5% 0 5% 0;
        border-bottom:1px solid #e7e7e7;
    }
   
   
/*MOBILE*/

    @media only screen 
    and (max-device-width : 480px) {
   
        body{
            margin:0 0 0 0;
            padding:0 0 0 0;       
        }
       
        div [class="container"]{
        width:100%!important;
        height:100%!important;
        text-align: center!important;
    }
        h1{
            font-size:30px!important;
        }
       
        h2{
            font-size:12px!important;
            width:100%;
        }
       
       
        div [class="header"]{
            margin: 0 0 10% 0!important;
            width:100%!important;
            height:123px!important;
            position:relative!important;
            background-color:#7f1328!important;
            color:#fff!important;
            display:block!important;
        }
       
        div [class="tmclogo"]{
            position:relative!important;
            display:block!important;
            text-align:center!important;
            vertical-align:middle!important;
            margin-left:5px!important;
        }
       
        div [class="nb_text"]{
            position:relative!important;
            font-size:20px!important;
            margin-top:0%!important;
            margin-left:0px!important;
            margin-right:0px!important;
            padding-top:32px!important;
            float: none!important;
        }
       
        div [class="tmccontent"]{
            text-align: center!important;
            position:relative!important;   
            width:100%!important;
            margin:0px!important;
            border: 0px solid #eaeaea!important;
        }
           
        div [class="section"]{
            display:inline-block!important;
            position:relative!important;
            width:100%!important;
            margin:0 auto!important;
            height:100%!important;
            text-align: center!important;
        }
       
        div [class="textcontent"]{
            margin:0 15% 0 15%!important;
            text-align: center!important;
        }
       
        div [class="image"]{
        position:relative!important;
        display:block!important;
        margin-top:10%!important;
        }
       
        div [class="infobutton"]{
            font-size:14px!important;
            text-align:center!important;
            position:relative!important;
            width:170px!important;
            height:28px!important;
            padding:20px 32px 20px 32px!important;
            color:#fff!important;
            top:5%!important;
            background-color:#cacaca!important;
            text-decoration: none!important;
        }
       
        div [class="infobutton:hover"]{
            font-size:14px!important;
            text-align:center!important;
            position:relative!important;
            width:170px!important;
            height:28px!important;
            padding:20px 32px 20px 32px!important;
            color:#fff!important;
            top:5%!important;
            background-color:#7f1328!important;
            cursor:pointer!important;
            text-decoration: none!important;
        }
       
        div [class="footertext1"]{
            text-align: center!important;
            font-size:9px!important;
            line-height: 110%!important;
            color:#b6b6b6!important;
            margin-bottom: 20px!important;
            margin: 0 5px 20px 5px!important;
            white-space: normal!important;
        }
   
        div [class="footertext2"]{
            text-align: left!important;
            font-size:8px!important;
            color:#b6b6b6!important;
            margin: 0 5px 20px 5px!important;   
        }
       
        div [class="footertext3"]{
        margin-left:5px!important;
        font-size:8px!important;
        }
   
    }       
</style>

Thank you!

portfelio, 2 years ago

Hi themobilecompany, to start with, you should definitely aim to get your template built with tables, not divs. Tables are the standard for email at the moment.

With your media queries, instead of:

@media only screen  
    and (max-device-width : 480px)

try:

@media only screen
and (max-width: 480px) 

this should make your design resize in your browser.

themobilecompany, 2 years ago

Thank you for your reply. So every div element should be changed into a table element?

Thank you

portfelio, 2 years ago

yes, replacing divs with tables is the way to go.
Generally speaking, every new horizontal section should be a new table.

themobilecompany, 2 years ago

Alright, changed the layout to a table layout. Scales very nicely in the template viewer. However, when testing the test mail, we don't get to see a responsive layout. Tested on a nexus 7 and iphone 4S.

i've tried

@media only screen
and (max-width: 480px)

and

@media only screen
and (max-device-width: 480px)

With max-width, the desktop browser detects the responsiveness but the mobile device does not. with max-device width the responsiveness does not work at all.

Any ideas?

themobilecompany, 2 years ago

I changed the syntac to the normal syntax again. Could that be the issue?

<style type="text/css">
     * {
         font-family: "myriad pro", Helvetica, Arial, "Lucida Grande", sans-serif;
     }
     h1 {
         display:inline;
         font-size:48px;
         font-weight: normal;
         color:#7f1328;
         }   
     
     h2 {
         font-size:14px;
         font-weight: normal;
         color:#6d6d6d;
         width:400px;
         margin-bottom:30px;
         }   
     
     h3 {   
         display:inline;
         font-size:36px;
         font-weight: normal;
         color:#7f1328;
         width:400px;
         }   
         
     body{
         padding:0;
         margin:0;
         width:100%;
         text-align:center;
     }   
     
     .container{
         display:inline-block;
         width:755px;
         height:100%;
         text-align: center;
     }
     
     .header{
         margin: 0 0 10% 0;
         width:740px;
         height:77px;
         position:relative;
         background-color:#7f1328;
         color:#fff;
         display:block;
     }
     
     .headercontent{
         text-align:center;
         position:relative;
         display:block;
     }
     
     .tmclogo{
         position:relative;
         float:left;
     }
     .nb_txt{
         position:relative;
         float:right;
         font-size:20px;
         padding-top:30px;
         margin-right:25px;
     }
     
     .tmccontent{
         text-align: center;
         position:relative;   
         width:740px;
         margin:5px;
         border: 1px solid #eaeaea;       
     }
         
     .section{
         display:inline-block;
         position:relative;
         width:740px;
         margin:0 auto;
         height:100%;
         text-align: center;
     }   
       
       
     .textcontent{
         margin:0 23% 0 23%;
         text-align: center;
         
     }
         
     .infobutton{
         font-size:14px;
         text-align:center;
         position:relative;
         width:170px;
         height:28px;
         padding:20px 50px 20px 50px;
         color:#fff;
         top:5%;
         background-color:#cacaca;
         text-decoration: none;
     }
     
     .infobutton:hover{
         font-size:14px;
         text-align:center;
         position:relative;
         width:170px;
         height:28px;
         padding:20px 50px 20px 50px;
         color:#fff;
         top:5%;
         background-color:#7f1328;
         cursor:pointer;
         text-decoration: none;
     }
     
     .infobutton a:link{
         color:#fff;
         text-decoration: none;
     }
     
     .infobutton a:active{
         color:#fff;
         text-decoration: none;
     }
     
     .infobutton a:hover{
         color:#fff;
         text-decoration: none;
     }
     
     .infobutton a:visited{
         color:#fff;
         text-decoration: none;
     }
     
     .image{
         position:relative;
         display:block;
         margin-top:5%;
     }
     
     .footer{
         width:740px;
         margin-left: 5px;
     
     }
     
      .footercontent{
        text-align: center;
        position:relative;   
        width:740px;
        margin:5px;
     }
     
     .footertext1{
        height:30px;
        text-align: center;
        font-size:12.6px;
        color:#b6b6b6;
        margin-bottom: 20px;
        margin: 0 0 20px 0px;
        white-space: nowrap;
     }
     
     .footertext2{
         text-align: left;
         font-size:10px;
         color:#b6b6b6;
         margin: 0 0 20px 0;   
     }
     
     .footertext3{
     
         text-align: left;
         font-size:10px;
         color:#b6b6b6;
         margin: 0 0 20px 0px;
         height:30px;
     }
     
     .linebreak{
         width:100%;
         margin:5% 0 5% 0;
         border-bottom:1px solid #e7e7e7;
         height:35px;
     }
     
     
/*MOBILE*/

    @media only screen 
    and (max-device-width : 480px){
     
         body{
             margin:0 0 0 0;
             padding:0 0 0 0;       
         }
         
         .container{
         width:100%!important;
         height:100%!important;
         text-align: center!important;
         }
         h1{
             font-size:30px!important;
         }
         
         h2{
             font-size:12px!important;
             width:100%;
         }

         h3 {   
             display:inline;
             font-size:16px;
             font-weight: normal;
             color:#7f1328;
             width:100%;
             }           
         
         .header{
             margin: 0 0 10% 0!important;
             width:100%!important;
             height:60px!important;
             position:relative!important;
             background-color:#7f1328!important;
             color:#fff!important;
             display:block!important;
         }
         
         .tmclogo{
             position:relative!important;
             display:block!important;
             text-align:center!important;
             vertical-align:middle!important;
             margin-left:5px!important;
             width:50%;
         }
         
         .tmclogo img{
           width:100%;
         }
         
         .nb_txt{
             position:relative!important;
             font-size:20px!important;
             margin-top:4%!important;
             margin-left:0px!important;
             margin-right:20px!important;
             padding-top:0px!important;
         }
       
         
         .tmccontent{
             text-align: center!important;
             position:relative!important;   
             width:100%!important;
             margin:0px!important;
             border: 0px solid #eaeaea!important;
         }
             
         .section{
             display:inline-block!important;
             position:relative!important;
             width:100%!important;
             margin:0 auto!important;
             height:100%!important;
             text-align: center!important;
         }
         
         .image{
             position:relative!important;
             display:block!important;
             margin-top:10%!important;
         }
         
         .infobutton{
             font-size:14px!important;
             text-align:center!important;
             position:relative!important;
             width:170px!important;
             height:28px!important;
             padding:20px 32px 20px 32px!important;
             color:#fff!important;
             top:5%!important;
             background-color:#cacaca!important;
             text-decoration: none!important;
         }
         
         .infobutton:hover{
             font-size:14px!important;
             text-align:center!important;
             position:relative!important;
             width:170px!important;
             height:28px!important;
             padding:20px 32px 20px 32px!important;
             color:#fff!important;
             top:5%!important;
             background-color:#7f1328!important;
             cursor:pointer!important;
             text-decoration: none!important;
         }
         
         .footer{
             max-width:100%;   
         }
         
         .footercontent{
            text-align: center;
            position:relative;   
            width:100%;
            margin:0;
         }         
         
         .footertext1{
             text-align: center!important;
             font-size:9px!important;
             line-height: 110%!important;
             color:#b6b6b6!important;
             margin: 0px 5px 20px 5px!important;
             white-space: normal!important;
             height:30px;
         }
     
         .footertext2{
             text-align: left!important;
             font-size:8px!important;
             color:#b6b6b6!important;
             margin: 0 5px 20px 5px!important;   
         }
         
         .footertext3{
             margin-left:5px!important;
             font-size:8px!important;
             height:20px!important;
         }
     
     }       
</style>

thanks!

themobilecompany, 2 years ago

The responsive part is solved. Seems like when updating or replacing the template doesn't work that seamlessly.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098