Drag and drop editor img display:block

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
Playing around with the Drag & Drop editor the other day, we noticed that some of the images that we have coded into our templates (which we're creating by hand), were being displayed in a strange way inside the drag & drop editor. There seems to be a css file that's in use when you're editing your campaign that adds a display: block to all img tags. That causes some of our templates to be rendered strangely in the editor. This css rule appears to be the files called by the editor, but not by the preview window, since our images display perfectly when we preview them (and they display as intended when we send the messages). Could you explain the function of adding display:block to all images in the editor? Could that bit of css be removed? I don't want our clients to see something in the editor window that's markedly different from how their email will actually appear, but that's what's happening now. (For an example, please look at the Oregon Volunteers sub-account, and check out the saved mailing called "Newsletter Demo").
Photo of Meaghan

Meaghan, Champion

  • 83 Posts
  • 15 Reply Likes

Posted 4 years ago

  • 0
  • 1
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Good morning Meaghan! We're definitely not HTML experts here and do not support code troubleshooting, but I had one of my colleagues take a look to see if she saw anything that jumped out at her. I've included the rundown below and hopefully this helps get you moving along in a good direction. Please let me know if you have any questions.
  • Where the send to a friend and social media icons are -- you'll need to nest a table there and put each image in its own table cell to keep it in place.
  • Every image tag needs to include this¬†style="display:block;"¬†AND this: border="0"
  • If you already have the style piece in a particular image tab, the display:block; property should be added to that one style piece, not have two separate style sections inside one image tag.
  • For the header image, there looks to be two style tags in it. Just having the one style tag should help do the trick