CODEWITHSUNDEEP
phphtmlcss
Nathan Miranda
Nathan Miranda

Reputation: 98

CSS Not Working When Inserted By PHP

I have been trying to use PHP to insert my CSS's file contents in the style tag of a page.

<style>
    <?php 
        $css = file_get_contents('css/roboto-robotocondensed.css');
        $css .= file_get_contents('css/reset.css');
        $css .= file_get_contents('css/mainstyle.css');
        $css .= file_get_contents('css/industriaalimentosebebidas.css');
        echo $css;
    ?>
</style>

And in the last file, "industriaalimentosebebidas.css", i have the following code:

header {
    height: 500px; 
    background: url(../img/cases/casos-de-sucesso-alimentos-e-bebidas-cover.jpg) no-repeat center bottom / cover;
}

header p { 
    width: 75%;
    font-size: 1.536rem;
}
.imgGradient {
    height: 100%;
} 

@media only screen and (min-width: 1600px) {
    header {
        height: 700px;
    }
}

For some reason, the header style code above the media query is being ignored by the browser. But, when I get the CSS file using

<link rel="stylesheet" type="text/css" href="css/industriaalimentosebebidas.css"/>

everything works fine.

In the inspector, the header height does not seem to be overwritten... and background image is not being loaded.

Even if I remove the media query part, the header part does not work.

In the html head I'm using 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

Does anyone have a clue of what might be going on?

Upvotes: 1

Views: 202

Answers (1)

wodka
wodka

Reputation: 1390

in your css look for the line: 

#infos .imgContainer{max-height:25vw}1rem}

this is the reason it is broken.

original:

basically add spaces between the files: (not semicolons, remembered that wrong)

<style>
<?php 
    echo implode("\n", [
        file_get_contents('css/roboto-robotocondensed.css'),
        file_get_contents('css/reset.css'),
        file_get_contents('css/mainstyle.css'),
        file_get_contents('css/industriaalimentosebebidas.css')
    ]);
?>
</style>

Upvotes: 3

Related Questions