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:
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; } }
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.