Media queries in Bootstrap

06-06-2014 | Marcel van Langen | Bootstrap | bootstrap, responsive, structuur, media, queries

Bootstrap? Fantastisch. Heerlijk om mee te werken. Het neemt je veel werk uit handen om een responsive opzet van je applicatie of website te realiseren. Maar soms moet je toch een aanpassing maken bij een bepaalde schermgrootte, bijvoorbeeld wanneer het scherm kleiner is dan 480 pixels. In ons geval gaan we op dat moment het logo laten verdwijnen.

In ons geval hebben we een probleem met een logo dat over een carousel is geplaatst. Bootstrap biedt goede mogelijkheden om afbeeldingen responsive te maken. De plaatsing van het logo (over een carousel en onder een uitklapbaar menu) zorgt er echter voor dat het logo niet meer goed te zien is bij een schermbreedte van minder dan 480 pixels. Tijd om alleen in dat geval een aanpassing te doen

Standaard (versie 3 en hoger) kent Bootstrap 4 verschillende formaten scherm:

  • Large desktop (> 1.200 pixels)
  • Portrait tablet tot landscape tablet en desktop (> 768 pixels en < 979 pixels)
  • Landscape telefoon tot portrait tablet (> 480 pixels en < 767 pixels)
  • Landscape telefoons en lager (< 480 pixels)

Bij het testen is het natuurlijk wel handig om te zien op welk moment de browser overschakelt naar het volgende formaat. Een handige tip is om de volgende code op te nemen in je webtoepassing:

<span class="visible-xs">SIZE XS</span><span class="visible-sm">SIZE SM</span> <span class="visible-md">SIZE MD</span><span class="visible-lg">SIZE LG</span>

Verander je nu de breedte van je browserscherm, dan zie je direct welk formaat op dat moment is gekozen. Maar goed, we willen het logo laten verdwijnen op het moment dat het scherm minder dan 480 pixels breed is. Het logo is als volgt opgenomen in de code:

<a href="index.cfm"><img src="img/logo.png" class="logoBanner" id="logo"></a>

Media queries zijn de oplossing. Met behulp van media queries kunnen we eenvoudig aanpassingen maken voor een specifieke resolutie. In het geval van Bootstrap ziet de custom CSS code er globaal als volgt uit:

@media (min-width: 1200px) { }
@media (min-width: 980px) and (max-width: 1199px) { }
@media (min-width: 768px) and (max-width: 979px) { }
@media (max-width: 767px) { }

Binnen de curly brackets kun je alle CSS statements maken die je wilt. In ons geval gaan we alleen een aanpassing maken aan het laatste statement, zodat het logo niet langer wordt getoond. Onze code ziet er dan als volgt uit:

@media (max-width: 480px) { #logoDVM { display: none; } }

Over Morloff

Morloff ontwerpt en realiseert succesvolle webtoepassingen op het gebied van procesoptimalisatie, eCommerce en rapportage door de inzet van moderne webtechnieken, sociale media en zoekmachine optimalisatie.

over ons | diensten | portfolio | contact | route

naar website IJsmonster.nl naar website ICT intermediairs naar website marcelvanlangen.com

Twitter

Morloff

Cuneraweg 169a
3911 RH Rhenen

M +31 (0)6 - 515 96 189
W www.morloff.nl
E contactformulier

Morloff op Twitter Morloff op Facebook Morloff op LinkedIn Morloff via RSS