Menu icon Foundation
Android 4.4 Window Width Issue

Here's what I'm seeing in a Litmus test on Android 4.4. The width is outside of the window. It's working properly on all other platforms. Any ideas what is going on here?

android 4.4inkywindow width

Here's what I'm seeing in a Litmus test on Android 4.4. The width is outside of the window. It's working properly on all other platforms. Any ideas what is going on here?

Corey Schaaf about 3 years ago

are you by chance using center tags and wrapper tags? 

Cam Heikkinen about 3 years ago

This is the row that's having issues. I'm not using wrapper tags. This is just sitting in the main container tag.

<row class="main">
    <columns>
      <h1 class="uppercase orange">Expanded Construction Drawings Now Available</h1>
      <p class="intro black">Provide architects and building engineers additional details about your laundry project when they prepare permits and drawings.</p>
      <spacer size="18"></spacer>
      <center>
        <img src="http://media.campaigner.com/media/7/73620/Speed%20Queen/sq-multihousing-main-image.jpg">
      </center>
    </columns>
  </row>

I wasn't sure if you meant that the h1 was in the center tag. It's not, if that matters.

Corey Schaaf about 3 years ago

So what your saying is if you remove this entire row, the issue with the email expanding beyond the viewport no longer happens? 

Is your image a retina image (meaning it's twice the size of the viewport?) If so - you need to add the width="" height="" attributes on your image. 

Do me a favor and remove your H1 copy.  I think the word "construction" is too large for the viewport based on the size of the copy.  If that fixes the issue I think you just need to adjust the size of your h1 copy. 

If that doesn't work, try and remove the center tag and the image inside the center tag.  

That should at least isolate it down to one of those elements. 

Corey Schaaf about 3 years ago

Also, does your class="main" add any padding to the left and right of the email i that row? do you have a Margin set to the left and right on class="main"? 

Cam Heikkinen about 3 years ago

I believe it's the h1 being too long.

I've made an issue on Github.

The word should wrap by default, in my opinion, as opposed to just breaking the layout.

Rafi Benkual about 3 years ago

 Hmm,

I think wrapping content for these situations may be case by case. Do you know of a universal solution?

You can use some CSS like this to force a break:

 

```

    overflow-wrap: break-word;

    word-wrap: break-word;

    -ms-word-break: break-all;

    word-break: break-all;

    word-break: break-word;

    -ms-hyphens: auto;

    -moz-hyphens: auto;

    -webkit-hyphens: auto;

    hyphens: auto;

    display: inline-block; 

    max-width: 450px; 

    vertical-align: middle;

```

or you can shrink the header to fit which IMHO will be better. Forcing a single headline word to break may be weird and hard to read.

Cam Heikkinen about 3 years ago

I agree that making a headline break is weird, but I don't think that the container width should ever extend beyond the width of the window by default. Again, I would think the default should be that it doesn't break the container. But that's just my opinion.

Rafi Benkual about 3 years ago

Hi Cam, 

I'm not certain but from what I've seen there is no known way to automatically prevent that other than forcing all the links and text to break with the CSS I linked above. If you have another solution, we're open to it!

One way to tackle these cases is to add these kinds of situations to the documentation to help people around these issues. We started a page here that would be great for it. 

I'd love your thoughts!

Paul Fanning about 3 years ago

Try removing the <spacer> tag.  I'm using the SASS version, want to use <spacer> but it keeps causing problems on Android 4.4 in Litmus, just like the one you show above.  Removing the spacer tag causes my email to render correctly. Unfortunately, it leaves me with a different problem which is how to gain the desired spacing.