Trying to change the css of mobile friendly campaign monitor template

I need to change an image banner from one full width (640) to be split into 3 so one image will need to be 214px and the other two images should be 213. This is easy enough to do, but how do i work out what the width should be for the mobile screens with max width 480?

Sample code of campaign monitor css is:
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }

So if i changed the class from 640 to 214. What then do i make the 300 value and how do i work that out for future with any value, is there a simple bit of maths involved?

Sorry if this seems like a simple question, bit of a newbie to the resizing for mobile thing.

Appreciate any help.

roshodgekiss roshodgekiss, 5 years ago

Hi tannoy, this could get fairly interesting :) You will need to apply a class to each of the 214/213px images, so they're reduced in size to 100px on a mobile device (3 * 100px = 300px). Lets say this class is 'header-img'.

Below table[class=w640], td[class=w640]..., add the following line:

img[class=header-img] { width:100px !important; }

If you're using this method, it's best to import your header images with your template, as adding them via the editor will strip the header-img class. Feel free to post your template code if you're unsure about any of this :)

Get in touch with us on Twitter:
We're also on Facebook:
tannoy, 5 years ago

Hey thanks for the help. While working on it i think we came to a similar conclusion, since then thought the brief changed slightly and I now need 4 sizes, unfortunately sliced into varying sizes as they need to be linkable links for logos. The only way i could get it to work was to make four different classes. It works for the most part, but when resizing for mobiles, as the numbers don't size perfectly to whole numbers (the maths i used to figure this out was 300/640=0.46875, so I then took my sliced image width and multiplied by 0.46875 to give the required number) it seems to be a pixel out in height due to some rounding up and down. a sample of code below to try to help explain:

table[class=w153], td[class=w153], img[class=w153] { width:71px !important; }
table[class=w82], td[class=w82], img[class=w82] { width:38px !important; }
table[class=w161], td[class=w161], img[class=w161] { width:76px !important; }
table[class=w244], td[class=w244], img[class=w244] { width:115px !important; }

The first two images are rounded down and the second two are rounded up so as to make 300px wide in total. However in doing this it means the height of the banner is about a pixel out (first half of banner is pixel shorter than the second half).

I tried rounding them all up or all down but that doesn't work as it is obviously making the total too big or small, it obviously needs to be 300.

If only image maps worked life would be sweet :)

Any ideas how to resolve this?

roshodgekiss roshodgekiss, 5 years ago

Haha, now this is getting mathematical. I think it's going to be near-impossible to get things pixel-perfect if it's not divisible by whole numbers.

Have you tried experimenting with % width values, too?

Get in touch with us on Twitter:
We're also on Facebook:

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free