Hjelp med responsive email!

I

iselinfjeld

New Member
Jeg prøver å sende ut en mail til våre subscribers som består av 3 bilder, hvorav to er linker.

Det fungerer fint i Outlook på Mac og på iOs, men i Outlook for windows blir bildene stooore, samme på Android.

Jeg har prøvd å justere width til alt fra 300-900px, også prøvd 100% alle veier. Fungerer ikke.

Etter å ha gjort litt research ser jeg at Outlook ser ut til å være et problem og at HTML/CSS må være responsive for at det skal fungere på alle plattformer.

Jeg har funnet noen templates for responsive mail, men får det ikke til å fungere.


Kan noen hjelpe meg med å sette sammen koden?

Trenger rett og slett bare at disse tre bildene blir satt under hverandre så de ser ut som det vedlagte bildet på alle plattformer;

<a href="http://www.ticket.no.com"><img alt="Ticket.no" border="0" id="headerImage campaign-icon" mc:allowdesigner="" mc:allowtext="" mc:edit="header_image" mc:label="header_image" src="https://d61b2508e4ded409de16-422b77...49/6937/Ticket_Logo_1447399818_1478798230.png" style="width:100%;" /></a>

<a href="http://fb.st/xjmwhd">

<img src="https://d61b2508e4ded409de16-422b77...serfiles/849/6937/Festivitoe11_1479118381.jpg" alt="Facebook" style="width:100%">

</a>

<a href="http://ticketkalender.no/#14788025611671&amp;if_height=1081">

<img src="https://d61b2508e4ded409de16-422b77...userfiles/849/6937/Festivitoe2_1478798078.jpg" alt="Ticketkalender.no" style="width:100%">

</a>


Vedkommende som fikser skal få 200 kr over Vipps! :)
 

Vedlegg

  • Unknown.png
    Unknown.png
    230,3 KB · Sett: 4
Sist redigert:
I

iselinfjeld

New Member
Har faktisk prøvd det, prøvd det meste. Men i programmet mailen skal sendes fra er det ikke mulighet for å legge inn HTML og CSS hver for seg, og jeg skjønner ikke helt hvor CSS'en skal legges inn i koden..
Trenger derfor at noen lager hele koden for meg, med css-biten du linket til lagt inn rett sted.
 
T

Tarjei

Member
Så noe ala: css var bare copy paste fra mailchim siden det så ut som du brukte det. Aner ikke om det funker for ditt bruk.

HTML: 
<!DOCTYPE html>
<html>
<head>
<style>   
@media only screen and (max-width: 480px){
        .emailImage{
            height:auto !important;
            max-width:600px !important;
            width: 100% !important;
        }
    }
    </style>
</head>
<body>

<a href="http://www.ticket.no.com"><img class="emailImage" alt="Ticket.no" border="0" id="headerImage campaign-icon" mc:allowdesigner="" mc:allowtext="" mc:edit="header_image" mc:label="header_image" src="https://s-media-cache-ak0.pinimg.com/564x/c6/95/89/c695890575a094c86bd796ce8490be33.jpg"  /></a>

<a href="http://fb.st/xjmwhd">

<img class="emailImage" src="https://s-media-cache-ak0.pinimg.com/564x/c6/95/89/c695890575a094c86bd796ce8490be33.jpg" alt="Facebook">

</a>

<a href="http://ticketkalender.no/#14788025611671&amp;if_height=1081">

<img class="emailImage" src="https://s-media-cache-ak0.pinimg.com/564x/c6/95/89/c695890575a094c86bd796ce8490be33.jpg" alt="Ticketkalender.no" >

</a>


</body>

</html>
 
T

Tarjei

Member
Sånn, så bare sett width til ønsket størrelse https://jsfiddle.net/6p79o1q0/4/
HTML: 
<!DOCTYPE html>
<html>
<head>
<style> 
.emailImage{
    width: 400px;
}
@media only screen and (max-width: 480px){
        .emailImage{
            height:auto !important;
            max-width:600px !important;
            width: 100% !important;
        }
    }
  
    </style>
</head>
<body>
<div>
<a href="http://www.ticket.no.com"><img class="emailImage" alt="Ticket.no" border="0" id="headerImage campaign-icon" mc:allowdesigner="" mc:allowtext="" mc:edit="header_image" mc:label="header_image" src="https://s-media-cache-ak0.pinimg.com/564x/c6/95/89/c695890575a094c86bd796ce8490be33.jpg"  /></a>
</div>

<div>
<a href="http://fb.st/xjmwhd">

<img class="emailImage" src="https://s-media-cache-ak0.pinimg.com/564x/c6/95/89/c695890575a094c86bd796ce8490be33.jpg" alt="Facebook">

</a>
</div>
<div>
<a href="http://ticketkalender.no/#14788025611671&amp;if_height=1081">

<img class="emailImage" src="https://s-media-cache-ak0.pinimg.com/564x/c6/95/89/c695890575a094c86bd796ce8490be33.jpg" alt="Ticketkalender.no" >

</a>
</div>

</body>

</html>
 
Sist redigert:
I

iselinfjeld

New Member
Har prøvd med alle mulige slags koder nå.
Ingen som vet om man kan få lov til å hente ut koden når man har bygget i Mailchimp?
 
Du må logge inn eller registrere deg for å svare her.
Topp