Responsive boxes in HTML Email

Question

I use ActiveCampaign to send my emails, and recently I started building HTML emails to have better control of the situation.

ActiveCampaign automatically sets tables, so I don't need to worry about it, as it conforms a standard HTML to an email HTML.

I should have a responsive row with columns that wrap themselves once the user views the email on a mobile phone.

I'm trying to build some columns inside the email, I tried with flexbox but it constantly giving me errors in Gmail. I even tried with but it does not wrap content.

Here you can find the full code. I highlighted the part where I have issues.

.divmain {
  margin: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0 7px 0px #b5b5b5;
  -webkit-box-shadow: 0px 0 7px 0px #b5b5b5;
  box-shadow: 0px 0 7px 0px #b5b5b5;
}

.divp {
  background-image: url("http://i67.tinypic.com/jhzs0g.png"), linear-gradient(90deg, #FD8571, #EEBD7C);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  width: auto;
  border-radius: 5px 5px 0px 0px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 7%;
  padding-bottom: 7%;
  margin-bottom: 0;
  text-align: center;
}

.divs {
  background-image: url("http://i66.tinypic.com/350w10h.png"), linear-gradient(90deg, #7172fd, #bc7cee);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  width: auto;
  border-radius: 0px 0px 5px 5px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 7%;
  padding-bottom: 7%;
  margin-bottom: 0;
  text-align: center;
}

.divw {
  width: auto;
  padding-left: 7%;
  padding-top: 5%;
  padding-bottom: 1%;
  padding-right: 27%;
  text-align: left;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
  border-color: #cecece;
  margin: 0;
}

.row {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}

.column {
  flex: 33.33%;
  padding-left: 5%;
  padding-right: 5%;
  margin-bottom: 5%;
  margin-left: auto;
  margin-right: auto;
}

.columnbox {
  width: auto;
  border-radius: 8px;
  padding: 5%;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #cecece;
  -moz-box-shadow: 0px 0 7px 0px #b5b5b5;
  -webkit-box-shadow: 0px 0 7px 0px #b5b5b5;
  box-shadow: 0px 0 7px 0px #b5b5b5;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.border-div {
  border-style: solid;
  border-width: 0px 1px 0px 1px;
  border-color: #cecece;
  border-radius: 0 0 3px 3px;
}









  

    

      Sei della Famiglia adesso!

      Moover non è un semplice servizio,
 è una fantastica community!
      

      Scopri di più ►

    

    

      Oh! Eccoti!
 Volevamo informarti che il servizio di Crescita Organica è stato attivato con successo sul profilo @%USERNAME%
      

      Il periodo di Prova Gratuita durerà 7 giorni!
      

      (Goditeli fino in fondo!)
      

    


    


    Questi sono alcuni dati attuali del tuo account

    

      

        
          Follower Attuali
          99.000
        

      

      

        
          Likes Attuali
          99.000
        

      

      

        
          Commenti Attuali
          99.000
        

      

      

        
          Engagement Rate
          99.000
        

      

    

    

    

      Entra nell'Area Personale!

      Visita la tua Area personale cliccando qui.
 Potrai tenere traccia dei tuoi risultati!
      

      Visita la tua Area ►

The result should be a responsive row that, on the desktop has 4 columns aligned in a unique row. In mobile, it should be a vertical row like in the screenshot below:

Unfortunately, this is not the result that I have, and I absolutely need some help, because in Gmail App from Mobile Phone this is what I got:

Responsive boxes in HTML Email

Answers (1)

Related Questions