1

Hi I'm trying to create a Responsive Email Template.

I can't make the background images responsive.

Here is a sample of the images code:

a#learn-more {  background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; }

Basically We have the following images that I am having a hard time making fluid (responsive) -logo (a#learn-more) -banner image (.banner-img) -learn more button (a#learn-more) -image1 and image2

I have my demo here: http://jsfiddle.net/nLxjU/3/

Hope you can edit the code to see what my issue why I cant make them responsive.

I'm really stuck here.

Improve this question
3
  • 1
    What is responsive about width: 600px; height: 253px; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/img-banner.png') ? - if you need it to be responsive, remove the height and width and have the server serve a smaller image for smaller devices Commented Nov 20, 2013 at 12:08
  • Please elaborate on what you mean by "responsive". If you mean for it to have a dynamic width depending on the parent's width, then you should remove height: 68px; and width: 600px; Commented Nov 20, 2013 at 12:10
  • Responsive I mean to make the background images fluid as well. I had made some elements fluid just need to make the background images including the logo, banner, learn more etc. fluid. If you can check the code on jsfiddle you can see that there are some codes that might need to tweak to make it look good on smaller screen. Im just really stuck here. Commented Nov 20, 2013 at 12:19

3 Answers 3

Reset to default
1

You can use a different div with absolute positioning, and containing the image inside it with percentile width and height, so when the screen size changes, the div (and the image inside it) resizes, too. Just place the div below everything with z-index and you're done.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Email-clients, like Outlook (-Express), Mail (OSX) etc, all use different html-engines, and have a lot of restrictions. Especially Outlook seems to be using a limited IE6 based rendering engine. Background images and styling by css classes don't work, and forget about absolute or relative positioning.

Make sure the template also looks good in these email-clients, unless you only aim at mobile email clients (they seem to support all of this).

Take a look at the standards guide (html/css) at http://www.emailology.org/.

Improve this answer

Comments

1

You can improve with the following, but as @Willem says you really need to change your approach if making an email template. Many email clients completely remove the head and strip out styles. Some support a limited set of inline styles for formatting and none for layout. In fact an old-school table layout with inline styles is generally the best way to go.

You might find some of this useful: http://www.campaignmonitor.com/guides/mobile/

As for making the best of what you've got so far:

  1. Your .divider and .banner-img elements were set to 600px wide. Set them as 100%.
  2. Don't have the banner as a background image.
  3. Size your .lpanel and .rpanel images as 100% of the parent's width.

Demo: http://jsfiddle.net/nLxjU/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.