Responsive elementen

Om deze website responsive te maken zijn er aanpassingen gemaakt aan de standaard opmaak van de website. Er word gebruikt gemaakt van Media Queries om alles voor een groot deel te regelen.

3 kolommen

@media (min-width:760px) and (max-width:1010px) {...}

2 kolommen

@media (min-width:510px) and (max-width:760px) {...}

1 kolom

@media  (max-width:500px){...}

Een kolom is 240px breed. Dit heeft te maken met de breedte van een artikel. Als de windows de breedte heeft van 500px of kleiner heb je maar een kolom. Deze is bedoelt voor een mobiel.

##Header 1# Er worden verschillende elementen in de menu dropdown geplaatst, als er geen ruimte meer voor is in de de header. Deze elementen zijn:

• Artikel toevoegen
• Inloggen
• Uitloggen
• Registeren
• Gebruikersnaam

Alleen de berichten button blijft altijd inzicht, behalve al er met 1 kolom word gewerkt. De word gedaan door elementen op display:none; te zetten en andere weer op display:block;.

De breedte van de header verander afhankelijk van het aantal kolommen die worden gebruikt.

##Header 2# In header 2 zitten 3 buttons en een zoek functie.

• Categorieën
• Nieuwste Artikelen
• Top Artikelen
• Zoek functie

Afhankelijk hoeveel kolommen er worden gebruikt worden elementen weg gehaald met behulp van display:none; is de css.

Bij 3 kolommen word Nieuwste Artikelen weg gehaald. Vervolgens weer bij 2 en 1 kolom is alleen Top Artikelen en de zoek functie te zien.

De breedte van de header verander afhankelijk van het aantal kolommen die worden gebruikt.

##Wrapper# De #wrapper is de containt div. Hierin word alle contiant geplaast die verwisselt moet worden. De breedt van de wrapper word aangepast op het aantal kolommen die worden gebruikt.

##Javascrip#

De layout functie is ook onderdeel van het responsive maken van de website. Zie hier de toelichting

De tekst van hierboven zal nog in het engels vertaald worden.