CSS - @media only screen

ZAJDAN

  • *****
  • 2 074
    • Zobrazit profil
    • E-mail
CSS - @media only screen
« kdy: 14. 04. 2019, 20:23:42 »
Ahoj,
potřeboval bych jeden element na webu roztáhnout na 96% pokud se zobrazí na mobilu.
Kód: [Vybrat]
.prod-container {
  width:23%;
  min-height: 30px;
  float: left;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-right:2px;
  margin-bottom:1px;
  padding: 6px;
  padding-bottom:10px;
}

@media only screen and (max-width: 768px) {
    .prod-container {
      width:96%; 
    }
}

tohdle funguje na desktopu při zmenšení okna ale mobilní browser to ale ignoruje, zkusil jsem tedy přidat do indexové stránky
<meta name="viewport" content="width=device-width, initial-scale=1">
to ale rozhodí/smrští celou stránku

Vesele, vesele do továrny dělník běží...vesele, vesele do továrny jde. Vesele se usmívá když mu soustruh zazpívá...vesele, vesele do továrny jde. Vesele si poskočí když se soustruh roztočí ...vesele, vesele do továrny jde.


Re:CSS - @media only screen
« Odpověď #1 kdy: 14. 04. 2019, 20:31:38 »
A na jakém telefonu to zkoušíš? Dneska už mají mobily i FullHD docela běžně...

ZAJDAN

  • *****
  • 2 074
    • Zobrazit profil
    • E-mail
Re:CSS - @media only screen
« Odpověď #2 kdy: 14. 04. 2019, 20:54:18 »
na Sony Xperia X
Vesele, vesele do továrny dělník běží...vesele, vesele do továrny jde. Vesele se usmívá když mu soustruh zazpívá...vesele, vesele do továrny jde. Vesele si poskočí když se soustruh roztočí ...vesele, vesele do továrny jde.

Re:CSS - @media only screen
« Odpověď #3 kdy: 14. 04. 2019, 22:05:17 »
Ta má ale 1080p. Navíc tady budeš chtít spíš dotaz na denzitu, ale z hlavy ti víc neporadím...