Skip to content

How do I fix non-responsive branding in the Drag & Drop Email Editor?

← Editing Items: Drag & Drop Email Editor
Oh no! You’re in the Drag & Drop Email Editor and you notice an alert indicator on the Device Preview icon or beside certain branding blocks on the Insert Header or Insert Footer windows. Don’t panic – this indicator is letting you know that your branding could be non-responsive. And we can help!
 



First, click Device Preview and switch to phone view. Note your branding header at the top or scroll to the bottom to see your footer. 




Does your branding appear complete and not cut off on the right side? Hooray! Your branding is responsive, and you can send out your e-blasts with confidence.


If your branding is being cut off, it is non-responsive. You have the following options:
  • Create new custom branding following our responsive branding tips.

  • Edit the HTML of the existing custom branding.

  • Create new Structures with the necessary Blocks in the Drag & Drop Email Editor and save them as Modules. 

Responsive branding tips

  • When using tables add width in %, vh (variable height), or vw (variable width). Avoid using px (pixels) as this tends to break branding responsiveness. E.g., <table width="100%">

  • Use width:100% for outer most table instead of width:600px if width is needed.

  • Don't use style={table-layout: fixed;}.

  • For images, use 100% in the <img> tag so the image will be responsive. E.g., <img src="test.jpg" style="width:100%;">

  • Using vw (variable width) for text size will follow the size of the browser window. E.g., <h1 style="font-size:10vw">Testing</h1> 

Edit branding HTML


Click the ADMIN link to open the Admin panel. On the left select Asset Management, then Branding. Locate the non-responsive header or footer you want to edit and click the pencil icon. 



The Edit Branding Block window will open. Your branding will show in the Use the following content for the branding block section. Click the branding, then click the blue HTML button on the toolbar. The HTML editor will open. 




Here are some examples of non-responsive headers and footers and how they would be edited to make them responsive. The HTML of your branding blocks may not be the same as in these examples. Use the instructions as a guide to what to look for and edit in the HTML of your branding blocks. 


HEADER EXAMPLE 1


If you have a header like this:



The highlighted parts of the HTML below are causing the branding to be non-responsive:


That’s because elements of the header are set to a fixed width of 600px, no matter how narrow or wide the viewing device is.


Make this header responsive:

Change the three highlighted widths above from “600px” to “100%”. This will make the header adjust to 100% of the width of any viewing device.


HEADER EXAMPLE 2


If you have a header like this: 



The highlighted parts of the HTML below are causing the branding to be non-responsive:

 
There are two issues with the four highlighted areas:
  1. The "max-width" property is meant to be used in conjunction with a "width" property, which is missing in the header (and max-width isn't needed in this header).

  2. A couple of sections of the header are set to fixed widths (200px each), which prevents the width of the header from adjusting for smaller screen widths.

Make this header responsive:

Change the first “max-width: 100%;” reference to “width: 100%”. Remove the “max-width=100%” reference and the third and fourth highlighted width references (example shows width: 200px). 


FOOTER EXAMPLE 1


If you have a footer like this:



The highlighted parts of the HTML below are causing the branding to be non-responsive:

screenshot 1


screenshot 2


Make this footer responsive:

screenshot 1
  1. Change the top width parameter, outlined in blue in screenshot 1 above, from 600px to 100%. That change will allow the footer to adjust its size to 100% of the width of the device.

  2. Remove all the other fixed-width properties in the footer, outlined in green in screenshot 1.

screenshot 2
  1. Wrap each major section of the footer in a table. Examples shown in screenshot 2 indicated in blue.

  2. Wrap each individual element within the tables within a table row (td). Examples shown in screenshot 2 indicated in green.

  3. Add padding to email elements in the rows (tds) where beneficial. Example shown in screenshot 2 outlined in yellow. 

FOOTER EXAMPLE 2


If you have a footer like this:



The highlighted parts of the HTML below are causing the branding to be non-responsive:

screenshot 1


screenshot 2


screenshot 3


Make this footer responsive:

screenshot 1
  1. Replace the width of 600px in the first line of HTML with 100%. 

screenshot 2
  1. Remove the fixed pixel widths associated with each of the social media icons and logo, as outlined in green in screenshot 2.

screenshot 3
  1. Wrap each section of the footer in its own table, as shown in blue in screenshot 3. Wrap each icon in its own row <td>, as show in green in screenshot 3.

  2. Use the table align attribute to align parts of the table. For example, <table align=”left”>, as indicated by the green arrow in screenshot 3.

  3. Add padding for space between elements within the footer. Examples shown in screenshot 3 outlined in yellow. 

Still stumped? Use Live Chat to reach our Support Team for help or send an email to libraryaware@ebsco.com. 



Related Articles



Feedback and Knowledge Base

(thinking…)