Kotlin týden Zimní výprodej
Pouze tento týden sleva až 80 % na e-learning týkající se Kotlin
40 % bodů zdarma díky naší Zimní akci!

Diskuze: Nejdou mi media v css na stránkách

Aktivity (2)
Avatar
Denis Rimanovský:13. února 20:02

Dobrý den. Spolupracuji na jednom projektu ale nejdou mi @media nevím proč hledal jsem na spoustě stránkách proč nejdou ale nic nepomohlo.

Zkusil jsem:
@media only screen and (max-width: 700px)
@media screen and (max-width: 700px)
@media screen (max-width: 700px)
ale nic z tohoto nešlo.

Editováno 13. února 20:03
 
Odpovědět
13. února 20:02
Avatar
Odpovídá na Denis Rimanovský
Ondřej Šrytr:13. února 21:56

Ahoj,

můžeš zde úvest konkrétně tvou impementaci @media? Takhle těžko říct, proč by to nemohlo jít. :)

 
Nahoru Odpovědět
13. února 21:56
Avatar
Odpovídá na Ondřej Šrytr
Denis Rimanovský:13. února 22:21

Pokud to chápu chcete toto:

.popis-bestie p
{
    width: 90%;
    font-size: 18px;
    height: auto;
}
@media only screen and  (max-width: 700px) {
    .popis-bestie p {
        font-size: 12px;
    }
}
 
Nahoru Odpovědět
13. února 22:21
Avatar
Odpovídá na Denis Rimanovský
Denis Rimanovský:13. února 22:29

Přesněji ono media jako takové asi fungují protože když místo max dám min tak to začne reagovat a zrovna potřebuji aby tam bylo max.

 
Nahoru Odpovědět
13. února 22:29
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Denis Rimanovský
Peter Mlich:14. února 8:46

Nez jsi napsal dotaz, zkousel jsi reseni googlovat? Najit si nejake priklady, jak se to pouziva?

Co treba, kdybys napsal, co vlastne potrebujes, co to ma delat? Ani zadny tesstovaci minikod, ministranku jsi nedal. A zkousel jsi pouzivat, prozkoumat bootstrap?

A kdyz funguje min width nemuzes to napsat opacne?

...max... {p {color:red;}}
p {color:blue;}

...min... {p {color:blue;}}
p {color:red;}
 
Nahoru Odpovědět
14. února 8:46
Avatar
Odpovídá na Peter Mlich
Denis Rimanovský:14. února 9:16

Tak to napíšu jinak. Pracuji na projektu pro jedno TRPG a připravuji herní wiki, a potřebuji aby to bylo nějak funkční i pro mobili, ale vše funguje jen text se zvětšuje a právě tomu se snažím zabránit přes media ale nejdou.

Editováno 14. února 9:16
 
Nahoru Odpovědět
14. února 9:16
Avatar
Odpovídá na Denis Rimanovský
Ondřej Šrytr:14. února 12:13

Ahoj,

to CSS, které jsi poskytnul, je správné. Nemáš špatnou HTML strukturu? To pravidlo @media bude platit pro všechny bloky odstavce <p> v nějakém bloku s třídou popis-bestie (class="popis-bestie"), pokud bude šířka prohlížeče či zařízení menší nebo rovno 700 pixelů. Tady na codepenu máš funkční příklad s tím tvým CSS kódem. https://codepen.io/…/pen/NWqxMOg

 
Nahoru Odpovědět
14. února 12:13
Avatar
Odpovídá na Denis Rimanovský
Richard Tichý:14. února 12:39

A zkoušel jsi zápis

@media only screen and (max-width: 700px)
{
    color: red !important;
}

Za hodnotu nastavování dát nejvyšší prioritu (pomocí !important)?

Nahoru Odpovědět
14. února 12:39
Když už něco rozděláš, měl bys to dokončit.
Avatar
Odpovídá na Ondřej Šrytr
Denis Rimanovský:14. února 12:45

Moc děkuji, ale stále to nejde. Nechápu to. http://wiki.erindea.cz/bestie.php zde máte odkaz jestli chcete podívejte se do zdrojového kódu ale fakt nechápu proč to nejde.

 
Nahoru Odpovědět
14. února 12:45
Avatar
Odpovídá na Denis Rimanovský
Richard Tichý:14. února 12:47

Problém: platí to na každý element <p> obsažený v jakémkoliv elementu s
atributem class=“popis-bestie”

Řešení:

@media only screen and (max-width: 700px) {
    p.popis-bestie {
        font-size: 12px;
    }
}

Místo .popis-bestie p musíš použít p.popis-bestie.

Editováno 14. února 12:49
Nahoru Odpovědět
14. února 12:47
Když už něco rozděláš, měl bys to dokončit.
Avatar
Odpovídá na Richard Tichý
Denis Rimanovský:14. února 12:52

Děkuji ale stále to nejde. Už vážně nevím z jakého důvodu.

Editováno 14. února 12:52
 
Nahoru Odpovědět
14. února 12:52
Avatar
Odpovídá na Denis Rimanovský
Richard Tichý:14. února 12:53

Já jsem teď na mobilu, mohl by teda sem prosím poslat úryvek HTML, který je u popisku bestie?

Nahoru Odpovědět
14. února 12:53
Když už něco rozděláš, měl bys to dokončit.
Avatar
Odpovídá na Richard Tichý
Denis Rimanovský:14. února 12:54
.popis-bestie
{
    margin-top: px;
    margin-left: 45%;
}
.popis-bestie p
{
    width: 90%;
    font-size: 18px;
    height: auto;
}
@media only screen and (max-width: 700px) {
    p.popis-bestie {
        color: red;
    }
}
<head>
    <link rel="icon" href="https://www.erindea.cz/images/grafika/1580843514_1429.PNG">
    <title>Erindepedie</title>
    <link rel="stylesheet" type="text/css" href="assets/styles.css">
</head>
        <div class="popis-bestie">
          <h2>Popis:</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris dolor felis, sagittis at,
            luctus sed, aliquam non, tellus. Mauris elementum mauris vitae tortor. Aliquam erat volutpat. Integer tempor.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et lorem id felis nonummy placerat.
          </p>
        </div>
 
Nahoru Odpovědět
14. února 12:54
Avatar
Odpovídá na Richard Tichý
Ondřej Šrytr:14. února 12:54

Spíš takhle, ne? Selektor, podle toho co má na webu, má správně. Elementy <p> s třídou popis-bestie tam nejsou.

@media only screen and  (max-width: 700px) {
    .popis-bestie p {
        font-size: 12px!important;
    }
}
 
Nahoru Odpovědět
14. února 12:54
Avatar
Odpovídá na Denis Rimanovský
Ondřej Šrytr:14. února 12:56

p.popis-bestie by platilo pro všechny odstavce <p class="popis-bestie">....

 
Nahoru Odpovědět
14. února 12:56
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Ondřej Šrytr
Richard Tichý:14. února 13:02

Já jak jsem z mobilu, tak jsem se nemohl kouknout na HTML na stránce.

Nahoru Odpovědět
14. února 13:02
Když už něco rozděláš, měl bys to dokončit.
Avatar
Odpovídá na Richard Tichý
Denis Rimanovský:14. února 13:07

V pohodě proto jsem poslal kód jak jsi chtěl. Ale fakt nevím proč to nejde.

 
Nahoru Odpovědět
14. února 13:07
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:14. února 13:10

Zkus si projet css i html pres validator.. Na prvni pohled vidim, ze pred jednim px nemas zadne cislo. Od mista s chybou muze browser vsechny css ignorovat. Jinak na to jeste mrknu...
Google = css validator online

 
Nahoru Odpovědět
14. února 13:10
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:14. února 13:12

Mne to teda funguje. Opravil jsem ty class viz Ondrej. Smazal ostatni css, ktere pro testovani nepotrebuji.

<style>
.popis-bestie p
{
        color: green;
}
@media only screen and (max-width: 700px) {
    .popis-bestie p {
        color: red;
    }
}
</style>
        <div class="popis-bestie">
          <h2>Popis:</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris dolor felis, sagittis at,
            luctus sed, aliquam non, tellus. Mauris elementum mauris vitae tortor. Aliquam erat volutpat. Integer tempor.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et lorem id felis nonummy placerat.
          </p>
        </div>

Edit: Ve Firefoxu. Jestli to nejde v nejakem browseru, musis rict, pripadne googlem hledat cross browser max width on screen media css

Editováno 14. února 13:13
 
Nahoru Odpovědět
14. února 13:12
Avatar
Odpovídá na Denis Rimanovský
Richard Tichý:14. února 13:12

Zkus přidat <meta name=“viewport” ...

viz.: https://stackoverflow.com/…-not-working

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět
14. února 13:12
Když už něco rozděláš, měl bys to dokončit.
Avatar
Odpovídá na Richard Tichý
Denis Rimanovský:14. února 13:15

Mnohokrát děkuji všem kteří mi pomohli, a hlavně vám Richard Tichý.

 
Nahoru Odpovědět
14. února 13:15
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:14. února 13:15

Ten important by byl nutny, jestli by bylo treba prebijet nejake class. Ale v tom prikladu kopiruji stejnoou class adresu pred media i dovnitr, takze by se to melo prepsat. Jakoze mi to teda funguje. Tak jsem zvedav na tebe.

 
Nahoru Odpovědět
14. února 13:15
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:14. února 13:16

No, jasne, chrome :) Jenom neznaly lide pouzivaji Chrome. Vsichni vedi, ze jediny spoleh je na Firefox uz od prvniho Netscape :)

 
Nahoru Odpovědět
14. února 13:16
Avatar
Milan Turyna
Redaktor
Avatar
Odpovídá na Peter Mlich
Milan Turyna:14. února 20:46

A nebo také ti, kterým Chrome vyhovuje více než Firefox.

Editováno 14. února 20:46
 
Nahoru Odpovědět
14. února 20:46
Avatar
Odpovídá na Peter Mlich
Lukáš Tesař:14. února 22:11

Teď jsi mě teda fakt urazil. Souhlasím s Milan Turyna, je to o tom, co komu vyhovuje. Chrome, kromě toho, že tě sleduje na každém kroku, což mě osobně nevadí, dodržuje všechny standardy, které vydává W3C, a k tomu i semtam něco navíc. Co se týče zabezpečení, snaží se například prosazovat HTTPS, nové verze TLS atd. atd. tím, že stránky bez těchto technologií zobrazuje jako "Nezabezpečené" a tyto informace dělá čím dál okatější, aby uživatel mohl nadávat autorům stránky. Z měho pohledu správné řešení. Co se týče rychlosti, jsou na tom nejnovější FF a Chrome v podstatě stejně, podobně je tomu i u nároků na paměť. Chrome má o něco lepší DevTools. Takže - je to jenom o zvyku a o tom, co komu vyhovuje. Rozhodně se bráním tvrzení, že jsem neznalej kvůli tomu, že používám Chrome. Ciwe.:D

 
Nahoru Odpovědět
14. února 22:11
Avatar
Mego
Člen
Avatar
Mego:14. února 23:54

Chrome pouziva 80% ludi. Firefox 11%. Zmierte sa s tym... :-P

Nahoru Odpovědět
14. února 23:54
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
Jurajs
Člen
Avatar
Jurajs:15. února 17:31

Chrome používám odjakživa i když dělám weby...vždy funguje vše jak má....Firefox jsem zavrhl už dávno....A další prohlížeče typu Opera atp...nepoužívám vůbec ....

Editováno 15. února 17:31
 
Nahoru Odpovědět
15. února 17:31
Avatar
Jaroslav Smrž
Šéfredaktor
Avatar
Odpovídá na Jurajs
Jaroslav Smrž:15. února 17:46

Tak tomu nerozumím. Opera je na prohlížení webu jedním z nejlepších. Už kvůli vychytanému AdBlockeru a možnosti rychlého přepínání HTTP / HTTPS. Pro vývojářské možnosti se přikloním na stranu Firefoxu. Zas když ladím .NET Core aplikaci, používám Edge a překvapivě si nemůžu na nic stěžovat. Spíš naopak.

Nahoru Odpovědět
15. února 17:46
/* Life runs on code */
Avatar
Mego
Člen
Avatar
Mego:15. února 18:59

Toto uz je flamewar typu "php je najlepsie a java je sracka" :-D kazdy ozdaj nabera s takou lopatou, aka mu vyhovuje

Nahoru Odpovědět
15. února 18:59
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:16. února 22:39

Vzdycky, kdyz zjistis, ze neco nefunguje podle ocekavani, je v tom namocene prave chrome, explorer, opera. Obvykle se to tyka css a js. Chrome pouziva tolik lidi protoze je default v mobilu na androidu.

 
Nahoru Odpovědět
16. února 22:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 30 zpráv z 30.