Share
View previous topicGo downView next topic
avatar
Posts : 3
Join date : 2017-05-03
Location : University of Warwick, Coventry
View user profile

Images and Text - the padding, margin, table challenge

on Wed May 03, 2017 12:32 pm
Hi,

I'm trying to find a better solution to create something like this in our CRM emails:



which is lovely in desktop email but when viewed on mobile looks like this



I've tried using margin: 0px 10px 0px 0px and this looks great on mobile



but on Outlook (which we know is a PITA) it now looks like this



Has anyone got any ideas that work on both desktop, mobile...oh AND Outlook?

Thanks
avatar
Admin
Posts : 12
Join date : 2017-03-24
View user profilehttp://crmnetworkuk.forumotion.com

Re: Images and Text - the padding, margin, table challenge

on Wed May 03, 2017 4:02 pm
Hi Richard,

The main problem with the view in mobile is that in the examples given, you're still using a two-column layout for your table. Unless you have the image and text rescale to a very small width, this will always be an issue. The content is staying the same size whilst the table changes. It would be better if you used two rows for mobile. Also the margin padding you used will effect the right-hand margin only, which is why there is no left-hand padding for the text against the image.

If you attach the code in notepad format I can take a look? Not being an out-and-out HTML whizz-kid, I tend to need to have a look to figure it out pirat

(Or hopefully someone else might chip in with more/better knowledge than me)

thanks!

Andy
avatar
Posts : 3
Join date : 2017-05-03
Location : University of Warwick, Coventry
View user profile

Thanks for the help Andy

on Thu May 04, 2017 8:06 am
Andy.

Yeh, you're right...our entire emails moved from 2 column to a mobile friendly single column over a year ago...then I try to get clever! We used to do these type of quotes with the image on top but as our blogger images are usually square it looks kind of...meh. It's so frustrating being so close but Outlook borking it up. We never used to worry about Outlook as not many 17 year olds are cool enough to pretend they work in HE Admin yet...but with us implementing PG CRM a lot of current students will be using Outlook alongside Snapbookface. Here is the current code anyway but I don't expect miracles ;o)

<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: calc(100%); max-width: 600px !important;" width="600"><!-- wide blue -->
<tbody>
<tr valign="top">
<td style="padding: 11px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr valign="top">
<td bgcolor="#00b2dd" style="padding:15px;" width="578px">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr valign="top">
<td class="bigger_text" style="color: rgb(255, 255, 255); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; font-stretch: normal; font-size: 14px; line-height: normal; font-family: arial, helvetica, sans-serif; text-size-adjust: none;">
<table border="0" cellpadding="5" cellspacing="1" style="width: 100%;">
<tbody>
<tr>
<td><img align="left" class="image-placeholder" data-az-image="4148" src="/content/image/4148" style="margin: 0px 10px 10px 0px;" /><img class="image-placeholder" data-az-image="4075" src="/content/image/4075" /><br />
<br />
<strong><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#FFFFFF;">My first friends on my course came from initial pastoral care meetings with our tutor groups which helped me find my feet and not feel lonely. Having a personal tutor to go to for academic support and pastoral care was wonderful.</span></span></span></strong><br />
&nbsp;
<div style="text-align: right;"><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#FFFFFF;"><img class="image-placeholder" data-az-image="4076" src="/content/image/4076" /></span></span></span></div>

<div style="text-align: right;"><br />
<span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#FFFFFF;"><strong>Sonia Kumar, Biochemistry</strong></span></span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Sponsored content

Re: Images and Text - the padding, margin, table challenge

View previous topicBack to topView next topic
Permissions in this forum:
You cannot reply to topics in this forum