CSS - @media only screen

[ZAJDAN]

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

[Reklama]

[Cikáda]

A na jakém telefonu to zkoušíš? Dneska už mají mobily i FullHD docela běžně...

[ZAJDAN]

na Sony Xperia X

[Cikáda]

Ta má ale 1080p. Navíc tady budeš chtít spíš dotaz na denzitu, ale z hlavy ti víc neporadím...