Hallo,

Hoe kan ik ervoor zorgen dat op mobiel alle td's onder elkaar komen.
Er is een width voor veel td's opgenomen in de css, maar in mobiel moet deze gewoon genegeerd worden en dus netjes onder elkaar als rijen.
Op een andere site van mij lukt het op een of andere manier wel, maar daar heb ik geen standaard breedtes ingesteld, hoe kan dat? Grids zijn onmogelijk ivm cms erachter voor de klanten
Niels Rietveld op 08/08/2015 19:06:21

Op een andere site van mij lukt het op een of andere manier wel


Dat zijn waarschijnlijk div's ? (Laat maar zien dan)
Heb het nagekeken, gewoon tabellen, table > tr > td

Voor mobiel
td {width: 100%; display: table-row;}
Ah oke maar dan moet je wel CSS mediaqueries gebruiken of op een andere manier dynamisch bepalen of je deze css regel wilt toevoegen.
Dat doe ik dus, letterlijk overgenomen uit de andere css waar die wel werkt, en het werkt niet...



[size=xsmall]Toevoeging op 08/08/2015 21:32:05:[/size]

Maar ik heb dit bijvoorbeeld:

@media screen and (min-width: 900px) {
td.home{width: 20%;}
}
@media screen and (max-width: 899px) {
td{width: 100%; display: table-row;}
td.home{width: 100%; display: table-row;}
Heb je een pb gedaan, met de link naar de site
Je kan van Bootstrap de grid gebruiken.

Als je alleen de grid wilt gebruiken kan dat ook. dan moet je naar de tab customize gaan en de rest allemaal uitvinken.
Mogelijk zijn de CSS-regels te algemeen en zijn er specifiekere regels die roet in het eten gooien? Heb je je document geïnspecteerd om te zien welke opmaak actief is bij die resolutie? Al was het maar om uit te sluiten dat iets anders de werking verstoort.

Ook weet ik niet of het een goede ontwerpprincipe is om stijlen rechtstreeks aan een element te koppelen. Als je je table op zijn minst een klasse geeft, dan zou dit je ophangpunt voor vervolgopmaak kunnen zijn.

Reageren