Nu staat er een vaste waarde op zie ik:
#breadcrumbs {
margin-bottom: 27px;
}
Dit kan je verhogen in het algemeen, of nog een @media regel toevoegen dat het enkel toegepast wordt op mobiele schermbreedtes – zie https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hallo Jeroen, bedanjkt voor je reactie! Met jouw advies en verder zoeken naar een code kwam ik tot de volgende oplossing:
@media screen and (max-width: 760px) { breadcrumbs {float: absolute; font-size: 14px; line-height: 1.6; color: #8e908f; margin-bottom: 45px;}}
Dit lost het mobiele probleem op. Echter, op mijn tablet en laptop werkt het niet. Ik heb in allerlei variaties het volgende geprobeerd:
#breadcrumbs {float: absolute; font-size: 14px; line-height: 1.6; color: #8e908f; margin-bottom: 27px;}
Ik weet van css niet meer dan dat ik pixels en dergelijke kan aanpassen. Weet jij een oplossing?
Hoi Willem,
Deze 2 gebruik ik regelmatig. 768px is de standaard iPad in portret modus.
/* Scherm tot en met 767px */ @media screen and (max-width:767px) { #breadcrumbs {margin-bottom:45px;} } /* Scherm vanaf 768px */ @media screen and (min-width:768px) { #breadcrumbs {margin-bottom:25px;} }
Maar er zijn veel verschillende schermgroottes. Dus ik gebruik alleen media queries als het écht nodig is.
Guido
Goeie tip van Guido. Daarnaast kan je ook werken met “niet-vaste” waardes in aantal pixels, maar ook in vh (viewport height), rem, %, … Zie meer uitleg: https://www.sitepoint.com/css-viewport-units-quick-start/
Bedankt Guido en Jeroen,
Ik lijk hiermee de oplossing te hebben. Ik kan echter op dit moment verder niet veel uittesten omdat ik bijna aan de maximale capaciteit zit voor pagina optimalisatie bij quic cloud.
.
