Not working with the CSS from foundation

Bolandish commented 7 years ago

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 commented 7 years ago

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

Bolandish commented 7 years ago

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 commented 7 years ago

@petecoop Do you have any idea ? :)

petecoop commented 7 years ago

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 commented 7 years ago

Yup

furey commented 7 years ago

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 commented 6 years ago

Update?

jamesdonn88 commented 6 years ago

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

petecoop / laravel-inky

Not working with the CSS from foundation #8