in2code-de / luxletter

Newsletter system for TYPO3
https://www.in2code.de/agentur/typo3-extensions/luxletter/
23 stars 25 forks source link

responsive behavior lost #108

Open stephangrass opened 2 years ago

stephangrass commented 2 years ago

The feature "Load CSS files now inline in HTML-tags" leads to the fact that not the complete Zurb CSS is loaded anymore. So the responsive behavior has been lost. No media queries included in the newsletter-mail.

einpraegsam commented 2 years ago

Hi,

hmm, that is possible. Can you name the parts the break functionality?

Alex

stephangrass commented 2 years ago

This affects the entire media query part. Especially the definitions with the table / cell widths.

@media only screen and (max-width: 596px) {
    table.body img {
        width: auto;
        height: auto; }
    table.body center {
        min-width: 0 !important; }
    table.body .container {
        width: 95% !important; }
    table.body .columns,
    table.body .column {
        height: auto !important;
        -moz-box-sizing: border-box;
...

    td.small-1,
    th.small-1 {
        display: inline-block !important;
        width: 8.33333% !important; }
    td.small-2,
    th.small-2 {
        display: inline-block !important;
        width: 16.66667% !important; }
    td.small-3,
    th.small-3 {
        display: inline-block !important;
        width: 25% !important; }

...

}

Media queries don't work as inline CSS ...

einpraegsam commented 2 years ago

Hmm, I think it is not possible to use inline css (for webmailer) and to use media queries at the moment. For you: You could remove the css from inline integration and do a classic integration again? But you will lose css for webmailers.

stephangrass commented 2 years ago

I did both. Inline CSS and the media queries, which I put into the body as a style block. That should make many email clients happy.

einpraegsam commented 2 years ago

If you have a good solution, PR are welcome