• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Onnodige ruimte onder flexbox grid

Status
Niet open voor verdere reacties.

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.359
Waarderingsscore
3
Hoi,

Ik heb een grid met flexbox gemaakt, maar onder het grid heb ik een stuk "lege ruimte" die ik daar niet wil hebben. De hoogte van dat lege stuk is gelijk aan de hoogte van een rij.

Op welke manier kan ik die onnodige, lege ruimte wegkrijgen?

ME-UselessSpaceGrid.png *, *:before, *:after{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; } .tilecontent { position: relative; width: 100%; margin: auto; overflow: hidden; } .tilecontent .content-overlay { position: absolute; height: 100%; width: 100%; left: 0; top: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .tilecontent:hover .content-overlay{ opacity: 1; } .tile-icon { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tilecontent:hover .tile-icon{ top: 50%; left: 50%; opacity: 1; } .tile-icon span { color: #fff; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; } .fadeIn-top{ top: 20%; } .tilebox { float: left; width: 100%; } .tilebox:before { content: ""; display: block; padding-top: 100%; } .naam-vakgebied { color: #fff; position: absolute; bottom: 8px; right: 0; text-align: center; width: 100%;} div.tile-wrap {display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; -webkit-flex-wrap: wrap; flex-wrap: wrap;} div.tile-wrap .tile {aspect-ratio: 1 / 1; color: white; font-weight: bold; font-size: 1em; text-align: center;}
 
Zet de HTML van de pagina hier neer, dan zal ik er naar kijken.
 
Dat was inderdaad het probleem! Fijn dat jullie beide even wilde meedenken. Dom van me inderdaad om de html niet erbij te zetten.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan