» Poradna » Web a internet

Tvorba stránek - responzivita.

 |   |  Microsoft Windows 8.1 Chrome 50.0.2661.87

Dobrý den,jsem amatér v tvorbě webu. Nedávno jsem si řekl, že se pustím do tvorby responzivních stránek, zde jsem narazil na problém, díky kterému sem píšu. Klasicky pomocí "@media (min-width: ...px)" jsem rozdělil na 2 "layouty", všechno mi šlo, ale pak jsem narazil na to, že jsem si udělal formulář pro registraci, ten jsem si zabalil do divu, abych to barevně oddělil, nastavil border atd... Jenže problém je v tom, že zatím co v layoutu pro desktop to funguje, layout pro mobil to úplně ignoruje a zůstává tam pouze suchý formulář s názvem a buttony. Pracuji metodou mobil first a mobilní zobrazení mi to stejně furt nebere.Nevíte čím by to mohlo být způsobeno?

Mohlo by vás také zajímat

Odpovědi na otázku

 |   |  Microsoft Windows 10 Chrome 50.0.2661.94

Je ten div ve které je form definovaný v tom css pro velikost mobilního rozlišení? Případně poslat link s ukázkou jak to vypadá

Souhlasím  |  Nesouhlasím  |  Odpovědět
avatar
 | Microsoft Windows 7 Firefox 45.0

A projevuje se to přímo v mobilu nebo i při zmenšení prohlížeče na mobilní rozlišení?

Souhlasím  |  Nesouhlasím  |  Odpovědět
 | Microsoft Windows 7 Firefox 46.0

Nedělej s klasickým box modelem, zkus https://css-tricks.com/snippets/css/a-guide-to-f... kde pomocí @media querry nastavuješ jen velikost fontu, od kterého se odvíjí velikost REM. Tedy pokud font-size:14px, tak 1REM = 14px; Pak můžeš nastavovat prvkům třeba width: 2rem (tedy 28px), pokud přes media querry změníš velikost font-size na 20px, bude mí 2rem = 40px

Souhlasím  |  Nesouhlasím  |  Odpovědět
 | Microsoft Windows 7 Firefox 46.0

*, *:before, *:after {box-sizing: border-box; margin: 0px; padding: 0px;}strong {font-weight: 700;}@-webkit-viewport{width:device-width;} @-moz-viewport{width:device-width;} @-ms-viewport{width:device-width;} @-o-viewport{width:device-width;} @viewport{width:device-width;}html {line-height: 1.4; font-size: 14px; font-family: 'Ubuntu', arial; font-weight: 300;}body {background: #262626; text-rendering: optimizeLegibility !important; -moz-osx-font-smoothing: grayscale !important;}/* MEDIA QUERIES */@media screen and (min-width: 960px){ html{ font-size: 15px; } }@media screen and (min-width: 1000px){ html{ font-size: 16px; } } @media screen and (min-width: 1330px){ html{ font-size: 17px; } }@media screen and (min-width: 1900px){ html{ font-size: 18px; } }@media screen and (min-width: 1921px){ html{ font-size: 19px; } }@media screen and (min-width: 2100px){ html{ font-size: 20px; } }

Souhlasím  |  Nesouhlasím  |  Odpovědět
 | Microsoft Windows 7 Firefox 46.0

A do HTML nezapomeň dát všude do <head><meta name="viewport" content="width=device-width,initial-scale=1">

Souhlasím  |  Nesouhlasím  |  Odpovědět