@ media koppelingen CSS

[Piet Barendregt]

Mijn vraag
Media script stylsheet om website (gemaakt op laptop) beschikbaar te maken voor i-pad en mobiel werkt niet.
Letters staan bij mobiel door elkaar.
Ziet iemand wat ik fout heb gedaan? Bij voorbaat dank voor jullie hulp!

Relevante software en hardware die ik gebruik
gemaakt op sublime text

Wat ik al gevonden of geprobeerd heb
gecontroleerd met W3Cvalidator en geeft geen foutmelding.

script als volgt:

Cascading Stylesheet:

@media screen and (max-width: 1200px)
{

#header {
width : 100%;
}

#menu {
width: 100%;
}

#de_rest {

  font-size: 100%; }
}

@media screen and (max-width: 1020px)

{
#header {
width : 90%;
}

#menu {
width: 90%;
}

#de_rest {

  font-size: 90%; }
}

@media screen and (max-width: 699px)

{

#header {
  width: 70%;
}

#menu {
width: 70%;
}

#de_rest {

   font-size: 70%; }
}

[ Voor 1% gewijzigd door RobIII op 12-11-2021 14:33 . Reden: Zoals in 't vorige topic aangegeven: gelieve [cide] tags te gebruiken. ]

[InFamous]

Nvm kijk scheel

[ Voor 96% gewijzigd door InFamous op 12-11-2021 12:28 ]

[Merethil]

Heb je een (relevant) voorbeeld van de HTML die je hiermee probeert te stylen? Want het lijkt me niet dat "de_rest" (dus alle overige elementen) allemaal met één ID aangesproken kunnen worden gezien een ID uniek hoort te zijn op de pagina.

Tevens kan je checken of je de volgende meta-tag in je HTML head hebt zitten:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

[ Voor 27% gewijzigd door Merethil op 12-11-2021 13:20 ]

[RM-rf]

Piet Barendregt schreef op vrijdag 12 november 2021 @ 10:17:
Mijn vraag
Media script stylsheet om website (gemaakt op laptop) beschikbaar te maken voor i-pad en mobiel werkt niet.
Letters staan bij mobiel door elkaar.

'werkt' niet en 'letters staan door elkaar' is wel een beetje héél vaag? kun je en screenshot posten hoe het eruit moet zien en hoe het eruit ziet op iPad?


@media rules zijn overigens niet echt bedoeld voor specifieke devices, maar vooral voor schermgrootte...

een iPad heeft schermverhouding van 768x1024 en een iPad pro van 1024x1366 dus ik zie niet direkt die 1200, 1020 en 699 pixels als 'relevante schermbreedte' terug...
eigenlijk komen ze mij relatief 'lukraak' gekozen voor
De eerste vraag is of het niet ook gewoon op desktop op deze scermgrootte hetzelfde probleem is

css kun je overigens in [ code=css ]-blocks plaatsen, en goede indentering maakt het beter leesbaar

Cascading Stylesheet:

@media screen and (max-width: 1200px) {

   #header {
      width : 100%;
   }
   #menu {
      width: 100%; 
   }
   #de_rest {
      font-size: 100%; }
   }

@media screen and (max-width: 1020px) {

   #header {
      width : 90%;
   }
   #menu {
      width: 90%;
   }
   #de_rest {
      font-size: 90%; 
   }
}

@media screen and (max-width: 699px) {
   #header {
      width: 70%;
   }
   #menu {
      width: 70%;
   }
   #de_rest {
      font-size: 70%;
   }
}

de media rules voegen hooguit 'properties' bij, naast de al geldende properties... het kan dus evengoed belangrijk zijn de style-rules die _niet_in de media-blocks mee te wegen, bv de 'font-size: 100%' betekent vooral dat je de lettertype grootte laat baseren op de al geldende lettertypegrootte van de container (dat percentage daarvan overneemt)

[ Voor 36% gewijzigd door RM-rf op 12-11-2021 13:35 ]

[DJMaze]

Piet Barendregt schreef op vrijdag 12 november 2021 @ 10:17:
Letters staan bij mobiel door elkaar.

Ik mis de relevante CSS.
Width heeft niks met de manier van text wrap te maken.
Misschien gebruik je per ongeluk position:absolute of margin:-1em of anders.

[Reinier]

Nvm

[ Voor 95% gewijzigd door Reinier op 13-11-2021 13:13 ]