Probllém se zobrazením, responsivitou – CSS – Fórum – Programujte.com

http://kod.djpw.cz/kyqc

Ahoj, předem přikládám kód, měl by být responsivní, ale když dám v nástrojích pro vývojáře v Edge emulaci pro různá zařízení, tak např. v rozlišení na výšku 320x640 se linear-gradient neaplikuje na celou šíři stránky, objeví se posuvníky po straně stránky, které jsem také zrušil přes html{overflow:hidden }. Mohl by prosím někdo zdatný mrknout na můj css kód, kde dělám chybu. Už jsem z toho na nervy a nevím, proč i když jsem vložil html{min-width:320px}, proč se web dá zmenšit i pod tuto hodnotu. Děkuji moc

Do html, body bych vubec nevrtal, nebo min. margin, padding:0. Overflow spis ne. Dalsi vlastnosti nejlepe nastavovat pro nejaky div uvnitr. Kdyz tam zacnes davit divoce css, tak se muze stat, ze nejaky prohlizec ti treba rozhaze float nebo position a jine divoke veci.

html, body - ve starem explorer melo tusim margin. Ve firefoxu padding. Coz bylo desne neprijemne, proto se doporucovalo oboje pro jistotu nulovat a nastavit si vlastni.
html ma nejake specialni vlastnosti. Melo by zastupovat v podstate objekt window. !00% vyska, 100% sirka.
U body by melo mit width 100% z nadrazeneho prvku. To je obvykle prave html. Vyska body zavisi od prohlizece obvykle je podle vysky obsahu, ale tusim nejaky prohlizec dava min-height jako 100% body.
K cemu jsou vazane posuvniky, ted nevim. Nejspis k html. Pokud body vytece.

Takze, asi ten overflow na to html. A kdyby to neslo v nejakem prohlizeci, tak na body. Ale min-width az na div v body. Body nema problem, to by se melo automaticky roztahnout.

Takže nakonec , aby se obrázek roztáhl na pozadí pěkně i na výšku, html -> height :100%; zajistí roztažení na výšku :

 html {
  background:linear-gradient(90deg,rgba(0,0,0,0.1),rgba(0,0,0,0.8)) ,url("https://www.tourisme.fr/images/otf_offices/1982/ile-de-sein-port.jpg") no-repeat center center fixed;  /*stín na obrázku*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-width:320px;  /* je minimální šíře stránky, pak už by se neměla zmenšovat, pod tuto hranici*/
  height:100%;
 
        }