Menu icon Foundation
Background colour of a row?

My old post was deleted by the spam robot, apologies for having to make another post.

@coreyschaaf

Apologies if I wasn't clear.

In Chrome Gmail, my design is looking like this:

 

However in Outlook, it is looking like this:

 

I want my Outlook version to look like my Chrome Gmail version.

Thanks!

emailbackground colorrow

My old post was deleted by the spam robot, apologies for having to make another post.

@coreyschaaf

Apologies if I wasn't clear.

In Chrome Gmail, my design is looking like this:

 

However in Outlook, it is looking like this:

 

I want my Outlook version to look like my Chrome Gmail version.

Thanks!

Corey Schaaf over 3 years ago

I sent the post to zurb foundation to unmark it as spam. However, I'll see if I can help you here. 

 

The images you are using appear to be pretty large images. (Retina images). Out of curiosity, the two images in the "This is a picture link section" appear to be fairly large. Do you have a height="" and width="" set on the <img> tag for those two images. My guess is that it isn't the wrapper that's causing the issue, but instead it's the total combined width of both images.  If those images are retina images (images that are larger than the container you're trying to put them inside of) you need to specify an image width and height directly on the image. This way outlook doesn't try to use the native (actual size) of the image. 

<row>
  <columns large="6"><img src="http://placehold.it/580x200" width="285" height="236"></columns>
<columns large="6"><img src="http://placehold.it/580x200" width="285" height="236"></columns>
</row>

// notice that the actual image size is 580px by 200px - however I'm specifying in the width and height attributes a size that will fit in the two column format as outlook is trying to use the native size of the image. 

Jack Hobbs over 3 years ago

I'm afraid I couldn't get it to work. Here's my code:

<row>
    <columns small="12" large="6">
      <a href="#"><img src="http://i.imgur.com/jfF5Ole.png" width="253" height="131" alt="blueberries"></a>
      <h5>Title</h5>
      <p>Just a few lines of text as a description for each image above</p>
    </columns>
    <columns small="12" large="6">
      <a href="#"><img src="http://i.imgur.com/jfF5Ole.png" width="253" height="131" alt="blueberries"></a>
      <h5>Title</h5>
      <p>Just a few lines of text as a description for each image above</p>
    </columns>
  </row>
  <row>
    <columns small="12" large="6">
      <a href="#"><img src="http://i.imgur.com/jfF5Ole.png" width="253" height="131" alt="blueberries"></a>
      <h5>Title</h5>
      <p>Just a few lines of text as a description for each image above</p>
    </columns>
    <columns small="12" large="6">
      <a href="#"><img src="http://i.imgur.com/jfF5Ole.png" width="253" height="131" alt="blueberries"></a>
      <h5>Title</h5>
      <p>Just a few lines of text as a description for each image above</p>
    </columns>
  </row>

Corey Schaaf over 3 years ago

Jack, can you send me all of your inky markup that way I can troubleshoot each section in case it isn't the images? 

Jack Hobbs over 3 years ago

---
subject: Template V1
---

<container>
  <wrapper class="dark-gray-container">
  <row><columns small="12" large="12"></columns></row>
  <row>
    <columns small="12" large="12">
      <p class="text-right" style="font-size:10px;color:#878787">Having trouble viewing this email? <a href="#" style="color:#fefefe">View in the browser.</a></p>
    </columns>
  </row>
</wrapper>
<row><columns small="12" large="12"></columns></row>
<row>
  <columns small="6" large="6">
    <img src="#" alt="logo">
  </columns>
  <columns small="6" largle="6">
    <p class="text-right" style="font-size:12px;padding-top:8px;"><a href="#" style="color:#ed5b23">www.link.com</a></p>
  </columns>
</row>
  <row class="collapse">
    <columns small="12" large="12">
      <img src="http://i.imgur.com/A1iINzT.png" alt="Newsletter title">
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <h1>Title</h1>
      <h2>Subtitle</h2>
      <p>Donec placerat eu lectus vitae dictum. Duis dignissim nibh in fermentum aliquet. Proin nec tellus hendrerit, aliquam lectus sit amet, accumsan purus. Donec vel pharetra tortor. Vestibulum ligula lectus, semper eu tortor rutrum, finibus ultricies neque. Donec porta commodo ex, non posuere massa iaculis vel. Aliquam rutrum nisi id augue</p>
    </columns>
  </row>
  <wrapper class="light-gray-panel">
  <row><columns small="12" large="12"></columns></row>
  <row>
    <columns small="12" large="12">
      <p class="centered-quote">"Phasellus a luctus ex. Nulla finibus elementum nunc, sed dignissim felis elementum id. In tincidunt aliquet tellus. Etiam ac sem libero."</p>
    </columns>
  </row>
  <row><columns small="12" large="12"></columns></row>
  </wrapper>
  <row><columns small="12" large="12"></columns></row>
  <row>
  <columns small="12" large="12">
    <h2>This is a picture link section</h2>
  </columns>
</row>
<row>
    <columns small="12" large="6">
      <a href="#"><img src="http://i.imgur.com/jfF5Ole.png" width="253" height="131" alt="blueberries"></a>
      <h5>Title</h5>
      <p>Just a few lines of text as a description for each image above</p>
    </columns>
    <columns small="12" large="6">
      <a href="#"><img src="http://i.imgur.com/jfF5Ole.png" width="253" height="131" alt="blueberries"></a>
      <h5>Title</h5>
      <p>Just a few lines of text as a description for each image above</p>
    </columns>
  </row>
  <row>
    <columns small="12" large="6">
      <a href="#"><img src="http://i.imgur.com/jfF5Ole.png" width="253" height="131" alt="blueberries"></a>
      <h5>Title</h5>
      <p>Just a few lines of text as a description for each image above</p>
    </columns>
    <columns small="12" large="6">
      <a href="#"><img src="http://i.imgur.com/jfF5Ole.png" width="253" height="131" alt="blueberries"></a>
      <h5>Title</h5>
      <p>Just a few lines of text as a description for each image above</p>
    </columns>
  </row>
</container>

Here you go Corey

Corey Schaaf over 3 years ago

Two questions can you send me your css for the classes you are referencing. 

And as a followup - are you talking about the desktop versions of outlook or the web versions of outlook? 

Rafi Benkual over 3 years ago

I would remove certain sections of your email until you find out what the culprit is. From there we can help you troubleshoot that piece.