Menu icon Foundation

My Posts

  • 3
    Replies
  • INK CSS best practice?

    By Doug Dennison

    inkcss

    What's the best way to pull CSS into email? We've tried to upload the entire CSS to our website and link to it in the header of the email HTML, then on inlining the needed CSS gets pulled in. This worked at the start but there became an issue with Inky... (continued)

    Last Reply by Rafi Benkual about 4 years ago



My Comments

Doug Dennison commented on Doug Dennison's post about 4 years

Anything we can do?

Doug Dennison commented on Doug Dennison's post about 4 years

Ok, retested with your line of code, and this shows:

https://litmus.com/tests/22076523/versions/5/results#ol2003-full_on
https://litmus.com/tests/22076523/versions/5/results#ol2007-full_on
https://litmus.com/tests/22076523/versions/5/results#ol2013-full_on

Yes its the spacing, mostly to the sides of the boxes

Your code didn't have wrapper last on the whole thing so i added that, but with or without it the same thing happened.

Doug Dennison commented on Doug Dennison's post about 4 years

Ah ok great. So i assume we keep all the CSS in the header after inlining?

Doug Dennison commented on Doug Dennison's post about 4 years

Trying to add 2 responsive columns, with 2 sub columns in each and so far have the code below, yet this appears different in each outlook! Needs to be centred.

<table class="row">
                    <tr>
                        <td class="wrapper">
                            <table class="six columns">
                                <tr>
                                    <td class="six sub-columns text-pad center" >

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="six sub-columns text-pad center">

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                        <td class="wrapper last">
                            <table class="six columns">
                                <tr>
                                    <td class="six sub-columns center text-pad" >

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="six sub-columns center text-pad last">

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

Doug Dennison commented on Doug Dennison's post about 4 years

<img style="width:100%; height:auto;" width="580" height="300" src="http://placehold.it/1160x600/" />

The above code breaks in Outlook 2003

Doug Dennison commented on Doug Dennison's post about 4 years

Thanks herrreiprich, good to know.

The resizing from large to small however is still an issue, do you have any code you've used in Ink that works?

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Doug Dennison's post about 4 years

Anything we can do?

You commented on Doug Dennison's post about 4 years

Ok, retested with your line of code, and this shows:

https://litmus.com/tests/22076523/versions/5/results#ol2003-full_on
https://litmus.com/tests/22076523/versions/5/results#ol2007-full_on
https://litmus.com/tests/22076523/versions/5/results#ol2013-full_on

Yes its the spacing, mostly to the sides of the boxes

Your code didn't have wrapper last on the whole thing so i added that, but with or without it the same thing happened.

You commented on Doug Dennison's post about 4 years

Ah ok great. So i assume we keep all the CSS in the header after inlining?

You commented on Doug Dennison's post about 4 years

Trying to add 2 responsive columns, with 2 sub columns in each and so far have the code below, yet this appears different in each outlook! Needs to be centred.

<table class="row">
                    <tr>
                        <td class="wrapper">
                            <table class="six columns">
                                <tr>
                                    <td class="six sub-columns text-pad center" >

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="six sub-columns text-pad center">

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                        <td class="wrapper last">
                            <table class="six columns">
                                <tr>
                                    <td class="six sub-columns center text-pad" >

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="six sub-columns center text-pad last">

                                  <a href="#"><img width="120" height="90" class="center" src="http://placehold.it/320x290" alt=""></a>

                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

You commented on Doug Dennison's post about 4 years

<img style="width:100%; height:auto;" width="580" height="300" src="http://placehold.it/1160x600/" />

The above code breaks in Outlook 2003

You commented on Doug Dennison's post about 4 years

Thanks herrreiprich, good to know.

The resizing from large to small however is still an issue, do you have any code you've used in Ink that works?

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content