All solutions

I was wondering how you approach the media queries. Lets say you do mobile first, do you set the margins for the small devices directly without a media querie and then overwrite it inside a media query for desktops later if needed?

Or is there a better way? Thanks for help.

Greetings Martin

I didn't implement skins because i already knew how to do it. But i am curious if there are more elegant ways to arrange your js code in the ways functions get called etc.

I am looking forward to seeing other solutions. I think the Design looks nice on paper, but there are some screens, where it doesn't look good, no matter what.

Feedback is welcome :)

Things that came up while doing it:

-I could not set margin-top on my grid container (its is the one holding the whole content of the page) Does anybody know why that is? Maybe because the header container has no size? And is that because it's elemnts are floated?

-Is there a better and more up to date way to align the navigation items than float? Maybe two containers for left and right, using inline-block on its elemnt and use the flexbox to align the items?

-I got a small css section for general layout instuctions, than a big one for the mobile layout and a big one for the desktop layout. Is the normal way to go? How would you do it?

Thanks in advance :) Greetings.

I tried to make it more responsive by adding responsive margins to the boxes, but it didnt worked as i liked to, so i made them static again. Justify-content:space-around; should be the expression that i was loooking for, but it didnt work. Does it only work on flexbox? Does somebody know another way how to make the boxes in a way they change margins on the desktop version?

I might try with flexbox soon anways i think...

Feedback is welcome. Do like the responsivness?

I tried to align the button, which is the last element in my container with justify-self:flex end; but it didnt work (the container itself has display:flex;). Does somebody know why this didn't work?