Guten Abend
Ich arbeite zurzeit an einem Projekt, das ich versuche mit Flexboxen umzusetzen. Zurzeit habe ich jedoch, das Problem dass die Media Queries nicht
nicht berücksichtigt werden. Was habe ich falsch gemacht ?
Kann ich prozentuale Angaben verwenden oder ist es besser flex: 1-5 zu verwenden ?
Code
- body {
- background-color: #151515;
- font-family: averia_sans_librelight;
- color: #fff;
- }
- #homepage {
- margin: 0 auto;
- margin-top: 35px;
- width: 1200px;
- display: flex;
- flex-direction: column;
- border: 5px solid #000;
- border-radius: 5px;
- box-shadow: 0 0 10px #000;
- background-image: url(images/background.jpg);
- background-repeat: repeat;
- }
- .header {
- height: 181px;
- background-image: url(images/header.jpg);
- background-repeat: repeat-x;
- }
- .navigation {
- height: 67px;
- background-image: url(images/navigation.png);
- background-repeat: repeat-x;
- }
- #row {
- display: flex;
- flex-direction: row;
- margin-top: 8px;
- margin-right: 20px;
- margin-left: 20px;
- }
- .content {
- flex: 3;
- margin-right: 12px;
- min-height: 470px;
- background-color: #000;
- }
- .sidebar {
- flex: 1;
- background-color: #000;
- }
- .footer {
- height: 60px;
- background-image: url(images/background_footer.jpg);
- background-repeat: no-repeat;
- background-color: #000;
- }
- @media screen and ( max-width: 500px ) {
- .homepage {
- width: 100%;
- }
- .header {
- width: 100px;
- }
- .navigation {
- width: 100px;
- }
- .content {
- width: 100px;
- }
- .sidebar {
- width: 100px;
- }
- }