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

Denis Rimanovský

Člen

Denis Rimanovský:13.2.2020 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.2.2020 20:03

Odpovědět

13.2.2020 20:02

Ondřej Šrytr

Člen

Ondřej Šrytr:13.2.2020 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.2.2020 21:56

Denis Rimanovský

Člen

Denis Rimanovský:13.2.2020 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.2.2020 22:21

Denis Rimanovský

Člen

Denis Rimanovský:13.2.2020 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.2.2020 22:29

Peter Mlich

Člen

Peter Mlich:14.2.2020 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.2.2020 8:46

Denis Rimanovský

Člen

Denis Rimanovský:14.2.2020 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.2.2020 9:16

Nahoru Odpovědět

14.2.2020 9:16

Ondřej Šrytr

Člen

Ondřej Šrytr:14.2.2020 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.2.2020 12:13

Richard Tichý

Tvůrce

Richard Tichý:14.2.2020 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.2.2020 12:39

Když už něco rozděláš, měl bys to dokončit.

Denis Rimanovský

Člen

Denis Rimanovský:14.2.2020 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.2.2020 12:45

Richard Tichý

Tvůrce

Richard Tichý:14.2.2020 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.2.2020 12:49

Nahoru Odpovědět

14.2.2020 12:47

Když už něco rozděláš, měl bys to dokončit.

Denis Rimanovský

Člen

Denis Rimanovský:14.2.2020 12:52

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

Editováno 14.2.2020 12:52

Nahoru Odpovědět

14.2.2020 12:52

Richard Tichý

Tvůrce

Richard Tichý:14.2.2020 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.2.2020 12:53

Když už něco rozděláš, měl bys to dokončit.

Denis Rimanovský

Člen

Denis Rimanovský:14.2.2020 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.2.2020 12:54

Ondřej Šrytr

Člen

Ondřej Šrytr:14.2.2020 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.2.2020 12:54

Ondřej Šrytr

Člen

Ondřej Šrytr:14.2.2020 12:56

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

Nahoru Odpovědět

14.2.2020 12:56

Richard Tichý

Tvůrce

Richard Tichý:14.2.2020 13:02

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

Nahoru Odpovědět

14.2.2020 13:02

Když už něco rozděláš, měl bys to dokončit.

Denis Rimanovský

Člen

Denis Rimanovský:14.2.2020 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.2.2020 13:07

Peter Mlich

Člen

Peter Mlich:14.2.2020 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.2.2020 13:10

Peter Mlich

Člen

Peter Mlich:14.2.2020 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.2.2020 13:13

Nahoru Odpovědět

14.2.2020 13:12

Richard Tichý

Tvůrce

Richard Tichý:14.2.2020 13:12

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

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

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

14.2.2020 13:12

Když už něco rozděláš, měl bys to dokončit.

Denis Rimanovský

Člen

Denis Rimanovský:14.2.2020 13:15

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

Nahoru Odpovědět

14.2.2020 13:15

Peter Mlich

Člen

Peter Mlich:14.2.2020 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.2.2020 13:15

Peter Mlich

Člen

Peter Mlich:14.2.2020 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.2.2020 13:16

Milan Turyna

Tvůrce

Milan Turyna:14.2.2020 20:46

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

Editováno 14.2.2020 20:46

Nahoru Odpovědět

14.2.2020 20:46

Řeš pouze to, co dokážeš ovlivnit.

Lukáš Tesař

Člen

Lukáš Tesař:14.2.2020 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.2.2020 22:11

Lava

Člen

Lava:14.2.2020 23:54

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

Nahoru Odpovědět

14.2.2020 23:54

Aspartám, sacharín, to je môj vitamín

Jurajs

Člen

Jurajs:15.2.2020 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.2.2020 17:31

Nahoru Odpovědět

15.2.2020 17:31

Jaroslav Smrž

Tvůrce

Jaroslav Smrž:15.2.2020 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.2.2020 17:46

/* Life runs on code */

Lava

Člen

Lava:15.2.2020 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.2.2020 18:59

Aspartám, sacharín, to je môj vitamín

Peter Mlich

Člen

Peter Mlich:16.2.2020 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.2.2020 22:39

Richard Tichý

Tvůrce

Richard Tichý:23.6.2021 12:21

Tak já jsem nedávno objevil prohlížeč Brave a je fakt super Vychází z Chromia, ale je optimalizovanejsi a má spoustu funkci navíc + nesbírá data a je open source.

Nahoru Odpovědět

23.6.2021 12:21

Když už něco rozděláš, měl bys to dokončit.

Jaroslav B.

Člen

Jaroslav B.:27.6.2023 12:01

Učím se programovat na stránce itnetwork programovat html , css a nefunguje mi odkaz v html na css soubor. Když napíšu v html odkaz na obrázek a k tomu přidám high = 30% , width = 30% tak se obrázek tomuto nastavení přizpůsobí, ale pokud z html high, width smažu a zadám to do css souboru tak se obrázek roztáhne na celou stránku a nastavení v css souboru ignoruje. Pro progtamování html a css používám Visual studio code.

Nahoru Odpovědět

27.6.2023 12:01

Peter Mlich

Člen

Peter Mlich:27.6.2023 14:19

1. zaloz si nove tema v kategorii, nepis do tematu jinych, pokud na to nechces reagovat, na co se ptaji.
https://www.itnetwork.cz/…s-webtvorba/
-- modre tlacitko: Vytvorit nove vlakno --

2. Z toho popisu neni uplne jasne, co tam mas. Zkus pridat pro obe varianty kod. Kod vloz pomoci tlacitka editoru zpravy

</>

"nefunguje mi odkaz v html na css soubor"

<link rel="stylesheet" href="mujsoubor.css" type="text/css">

"Když napíšu v html odkaz na obrázek a k tomu přidám high = 30% , width = 30% tak se obrázek tomuto nastavení přizpůsobí,"
Text odkaz na obrazek se da chapat jako tato konstrukce, Mas odkaz a nim se dostavas na obrazek

<a href="obrazek.jpg"> klikni na mne </a> <!-- nebo -->
<a href="obrazek-full.jpg"> <img src="obrazek-mini.jpg" width="30%" height="30%"> </a>

<a href="obrazek-full.jpg"> <img src="obrazek-mini.jpg" style="width:30%; height:30%"> </a>

Takhle zapsano se to muze chovat ruzne. 30% width je obvykle chapano jako 30% sirky obrazovky (nebo obklopujiciho prvku, pokud ma sirku definovanou, takze v mem pripade je sirka IMG a A ignorovana a pouzije se sirka BODY). Uplne jinak se to muze chovat s position

Zkus radeji napsat, ceho chces docilit a proc? A jestli jako zaklady chapes, tak bych mozna vyuzival css-bootstrap. Tam je html kod v dokumentaci, staci ho zkopirovat a obvykle s tim bootstrap-css funguje.

Stahnout a rozbalis si css (tlacitko download)
https://getbootstrap.com/…ed/download/

html kod stranky
https://getbootstrap.com/…ntroduction/#…
je dobre zacit tim, ze das do body jeste container a do nej vkladas ostatni kod

<div class="container">
  <!-- Content here -->
</div>

Chces tam treba karticku
https://getbootstrap.com/…onents/card/#…

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Muzes si to testnout na te strance code-pen https://codepen.io/…/pen/qBamdLj
Jejich html kod smazas a nahradis kodem pro tu karticku.

Ja jen, ze nema smysl se trapit s vlastni konstrukci, kdyz je to neco tak sikovneho jako css-bootstrap. Kdyby nekdo po tobe chtel neco spesl, co pres BT nevyskladas, tak mu rekni, ze to udelas, ale bude ho to stat 100x tolik, protoze budes muset vymyslet kod nebo zaukolujes nekoho, kdo to umi.

Nahoru Odpovědět

27.6.2023 14:19