HTML Flexbox CSS <style> @media min-width Problem

[Ed09]

Trying to implement:
http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website
within Django. 
Works fine when all of the Flexbox <style>....</style> section is within the template but if I move this style section to a css the following @media sections stop working but the rest continues to work.

<style>
..........
   @media all and (min-width: 600px) {
        .aside { flex: 1 auto; }
    }

    @media all and (min-width: 800px) {
        .main    { flex: 3 0px; }
        .aside1 { order: 1; }
        .main    { order: 2; }
        .aside2 { order: 3; }
        .footer  { order: 4; }
    }
</style>

If I implement it as a standard index.html and styles.css pair without Django it does work.
Any suggestions?  Thanks for your help.

[ludovic coues]

Look like your css isn't loaded.
Static file might be tricky to get right the first time

> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to django-users...@googlegroups.com.
> To post to this group, send email to django...@googlegroups.com.
> Visit this group at https://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/1b49e8aa-2a31-4673-ab2e-ebce9ab162c9%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.



--

Cordialement, Coues Ludovic
+336 148 743 42

[Lekan Wahab]

Hi,
In order to ease the work of making your changing your static files to the right URL format in Django,  a friend of mine came up with a library called *Staticfy* for it.

You can check it out on :
https://github.com/danidee10/Staticfy

It will really ease your work.

--

You received this message because you are subscribed to the Google Groups "Django users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.

[Mike Dewhirst]

Completely off-topic but I have found the CSS documentation and advice
on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/<whatever>
to be more effective and up-to-date than <whatever> found on w3schools.

w3schools always sorts to the top of the google page but you will see
the developer.mozilla item three or four entries below.

ymmv

On 25/09/2016 11:09 PM, Ed09 wrote:
> Trying to implement:
> http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website

> within Django.Â

> Works fine when all of the Flexbox <style>....</style> section is
> within the template but if I move this style section to a css the
> following @media sections stop working but the rest continues to work.
>
> <style>
> ..........

> Â Â @media all and (min-width: 600px) {
> Â Â Â Â Â Â Â .aside { flex: 1 auto; }
> Â Â Â }
>
> Â Â Â @media all and (min-width: 800px) {
>        .main   { flex: 3 0px; }
> Â Â Â Â Â Â Â .aside1 { order: 1; }
>        .main   { order: 2; }
> Â Â Â Â Â Â Â .aside2 { order: 3; }
>        .footer { order: 4; }
> Â Â Â }

> </style>
>
> If I implement it as a standard index.html and styles.css pair without
> Django it does work.

> Any suggestions? Thanks for your help.

> --
> You received this message because you are subscribed to the Google
> Groups "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send

> an email to django-users...@googlegroups.com
> <mailto:django-users...@googlegroups.com>.

> To post to this group, send email to django...@googlegroups.com

> <mailto:django...@googlegroups.com>.

> Visit this group at https://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/1b49e8aa-2a31-4673-ab2e-ebce9ab162c9%40googlegroups.com

> <https://groups.google.com/d/msgid/django-users/1b49e8aa-2a31-4673-ab2e-ebce9ab162c9%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Ed09]

Solved, had an error in the css, did not close out a note correctly, now working properly.  Thanks for your replies.