Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Not working with the CSS from foundation #8

Open
Bolandish opened this issue Sep 3, 2017 · 9 comments
Open

Not working with the CSS from foundation #8

Bolandish opened this issue Sep 3, 2017 · 9 comments

Comments

@Bolandish
Copy link

HI!

For me, it doesn't work with the CSS from foundation. Its not responsive at all.. What am i doing wrong? :)

Btw. nice code!
@petecoop
Copy link
Owner

petecoop commented Sep 4, 2017

Hey, can you provide some example of what you are trying to do?

@Bolandish
Copy link
Author

Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <link rel="stylesheet" href="mails.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <title>@{{subject}}</title>
    <!-- <style> -->
</head>
<body>
<table class="body">
    <tr>
        <td class="center" align="center" valign="top">
            <center>

                <spacer size="40"></spacer>

                <wrapper class="header">
                    <container>
                        <row class="collapse">
                            <columns>
                                <center>
                                    <img width="40" height="40" src="assets/img/logo.png">
                                </center>
                            </columns>
                        </row>
                    </container>
                </wrapper>
                @yield("content")
                <wrapper>
                    <container class="footer">

                        <row class=" text-center">

                            <columns>
                                <span class="text-center">
                                    <strong>talenthub.io</strong>
                                    <br/>
Nyhavnsgade 14, 4.th, 9000 Aalborg, Denmark  </span>
                            </columns>

                        </row>
                        <spacer size="20"></spacer>

                        <row class=" text-center">

                            <columns large="4">
                                <a href="https://talenthub.io">Unsubribe</a>
                            </columns>
                            <columns large="4">
                                <a href="https://talenthub.io">GO TO WEBSITE</a>

                            </columns>
                            <columns large="4">
                                <a href="https://talenthub.io">View in browser</a>
                            </columns>


                        </row>
                    </container>
                </wrapper>
                <spacer size="40"></spacer>

            </center>
        </td>
    </tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</div>
</body>
</html>

@extends('mails.new_layout')

@section('content')
<container>

    <spacer size="30"></spacer>

    <row>
        <columns small="12">
            <h1>{{ trans("mails.candidate.hello") }}</h1>
            <p>
                {{ trans("mails.candidate.description") }}
            </p>

        </columns>
    </row>


    <spacer size="30"></spacer>
    @php($i=1)
    @foreach($candidates as $candidate)
    <row class="list-item">
        <columns class="place" large="2">

            <div class="small-text-center">{{$i}}</div>
        </columns>
        <columns class="" large="8">
            <div class="small-text-center"><strong>{{$candidate->user->name}}</strong>
                <br/>Udvikler
            </div>
        </columns>
        @if($candidate->skills_score >= 70)
        <columns class="percent green" large="2">
            <div class="small-text-center"> {{$candidate->skills_score_floor}}%</div>
        </columns>
        @elseif($candidate->skills_score >= 40)
        <columns class="percent yellow" large="2">
            <div class="small-text-center"> {{$candidate->skills_score_floor}}%</div>
        </columns>
        @else
        <columns class="percent red" large="2">
            <div class="small-text-center"> {{$candidate->skills_score_floor}}%</div>
        </columns>
        @endif
    </row>
    @php($i++)
    @endforeach
    <spacer size="30"></spacer>


    <row>
        <columns large="7">
            <div class="small-text-center">{{ trans("mails.candidate.see_more_text") }}</div>

            <spacer size="10"></spacer>
        </columns>
        <columns large="5">
            <button class="expand" href="https://link.com">{{ trans("mails.candidate.see_all_candidates") }}</button>

        </columns>
    </row>

</container>
@stop

mails.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import 'settings';
@import "node_modules/foundation-emails/scss/foundation-emails";

@import 'styles';

The result is here

As you can see, the result isn't responsive. If i compiles the view with foundation-cli, its responsive.

@Bolandish
Copy link
Author

@petecoop Do you have any idea ? :)

@petecoop
Copy link
Owner

petecoop commented Sep 7, 2017

Hey, haven't had much of a chance to look into this... by foundation-cli is this the inky-cli that you're using to compile it?

@Bolandish
Copy link
Author

Yup

@furey
Copy link

furey commented Oct 1, 2017

Hi @Bolandish and @petecoop!

Unfortunately, I'm experiencing the same problem.

Foundation CLI: 2.2.5
petecoop/laravel-inky: 0.5.1

HTML generated via foundation (into my project's dist directory) works fine.

Media queries for HTML generated via this package don't appear to work at all.

Hrm…

@Sylk
Copy link

Sylk commented Apr 5, 2018

Update?

@jamesdonn88
Copy link

jamesdonn88 commented Apr 20, 2018 •
edited
Loading

Hi @Bolandish @petecoop @Sylk @furey

I've just been using this and found the issue to be that Foundation keeps media queries in a <style> tag after inlining, this PHP version just inlines everything and strips out the <style> block completely.

Our workaround was to take all the @media blocks out off the app.css created in the dist directory and paste them into a new <style> block as below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  <link rel="stylesheet" href="foundation-emails.css">
  <style>
  @media XXXX{
    **example***
   }
  </style>
</head>
<body>
  @yield('content')
</body>
</html>

Include all media queries, this should fix it.

Only issue I'm having at the moment is with mso-hide:all not working and i can't figure out why, i've even put it in inline styles and still showing on Outlook.

@jamesdonn88
Copy link

@Bolandish Looking at your web fonts for Roboto, it should like the following, not using @import

@media screen {
    @font-face {
        font-family: 'Playfair Display';
        font-style: normal;
        font-weight: 400;
        src: local('Playfair Display'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/2NBgzUtEeyB-Xtpr9bm1CV4QaRhHkZLZrsruvIjJ6Xo.woff) format('woff');
    }
    @font-face {
        font-family: 'Playfair Display';
        font-style: normal;
        font-weight: 700;
        src: local('Playfair Display Bold'), local('PlayfairDisplay-Bold'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/UC3ZEjagJi85gF9qFaBgIAjfA_CkPizPaBJKI36cCAY.woff) format('woff');
    }
    @font-face {
        font-family: 'Playfair Display';
        font-style: normal;
        font-weight: 900;
        src: local('Playfair Display Black'), local('PlayfairDisplay-Black'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/UC3ZEjagJi85gF9qFaBgIFG5nCscAKpKP81nraB-v6E.woff) format('woff');
    }
    @font-face {
        font-family: 'Playfair Display';
        font-style: italic;
        font-weight: 400;
        src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/9MkijrV-dEJ0-_NWV7E6N9QroGjXLbbdFByKqKsSrKI.woff) format('woff');
    }
    @font-face {
        font-family: 'Playfair Display';
        font-style: italic;
        font-weight: 700;
        src: local('Playfair Display Bold Italic'), local('PlayfairDisplay-BoldItalic'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/n7G4PqJvFP2Kubl0VBLDENo6rfrboWJUlegBR-uMPb6glnMp3_3A8V8Ai8YosRtX.woff) format('woff');
    }
    @font-face {
        font-family: 'Playfair Display';
        font-style: italic;
        font-weight: 900;
        src: local('Playfair Display Black Italic'), local('PlayfairDisplay-BlackItalic'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/n7G4PqJvFP2Kubl0VBLDEJdn2vTjPB9XMnyp27gz3a6glnMp3_3A8V8Ai8YosRtX.woff) format('woff');
    }
    @font-face {
        font-family: 'Josefin Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Josefin Sans'), local('JosefinSans'), url(https://fonts.gstatic.com/s/josefinsans/v9/xgzbb53t8j-Mo-vYa23n5qRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
    }
        @font-face {
        font-family: 'Josefin Sans';
        font-style: normal;
        font-weight: 700;
        src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04zxAPw1J91axKNXP_-QX9CC8.woff) format('woff');
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@petecoop @furey @Bolandish @Sylk @jamesdonn88