Autor Zpráva
Nikola
Profil
Dobrý den, učím se vytvářet webovky a momentálně dělám svůj první web. Zasekla jsem se ale u responzivního designu. Nerozumím tomu, jak to mám nyní upravit pro mobil a tablet. Snažila jsem se o tom hodně najít na internetu ale bohužel to nedokážu aplikovat na svůj web. Dokážete mi prosím někdo pomoci?
Odkaz na web: shakeit.wz.cz

EDIT: Zkusila jsem to upravit takto, a pár věci se tím vyřešilo, ale pořád to není úplně ono.
@media screen and (max-width: 480px) {
    body { width: 100%; height: 100%;}
    h1 { width: 100%;    height: 100%;}
    h2 { width: 100%;    height: 100%;}
    h3 { width: 100%;    height: 100%;}
    img { width: 100%;    height: 100%;}
    iframe { width: 100%;    height: 100%;}
    div.Obsah { width: 100%; height: 100%;}
    div.Header { width: 100%; height: 100%;}
    div.Tabulka { width: 100%; height: 100%;}
    .Obrazek { width: 100%;    height: 100%;}
    .Nazev { width: 100%;    height: 100%;}
    .Navigace { width: 100%;    height: 100%;}
    .KulatyObazek { width: 100%;    height: 100%;}
    nav { width: 100%;    height: 100%;}
    a { width: 100%; height: 100%;}
    ul li { width: 100%; height: 100%;}
    ol li { width: 100%; height: 100%;}

}
Moje CSS:

* {
    box-sizing: border-box;
}

body {
    background-color: rgb(242, 214, 224); 
    display: block;
    margin : 0; 
    line-height: 100%; /*výška řádku*/
    padding: 5% 10% 5% 10%;        
}

div.obsah {
    width: 90%;
    margin: auto; 
    background-color: white;
    border-radius: 15px; /*zakulacené rohy*/
    border: solid 2px;
    box-shadow: 10px 10px 5px #888888; /*stín*/
    border-radius: 15px;

}

div.header {
    width: 90%;
    margin:auto;
    padding: 1em; /*šířka vnitřního okraje*/
    background-color: white;
    text-align: center;  
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 15px;
    border: solid 2px; /*ohraničení*/
    box-shadow: 10px 5px #888888; /*stín*/
}

h1 {
    color: black;
    text-align:    center;
    font-family: "Times New Roman", Times, serif ;
    font-style: italic;
    font-size: 300%;
    letter-spacing: .2em; /*mezery mezi písmeny*/
        
}

h2 {
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 200%;
    letter-spacing: .2em;
}

h3 {
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 150%;
    letter-spacing: .2em;
}

p {
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size:    large;    
}

img {
    display: block; /*způsob zobrazení*/ 
    margin-left: auto; /*šířka vnějšího okraje*/
    margin-right: auto;    
}

nav{
    text-align:center;
    max-width: 100%;
    margin: 0;  

}

a {
    text-decoration: none;
    color: black;
    text-align: center;
    font-weight: bold; /*tučně*/        
}

.Odkaz    {
    text-decoration:underline;
    font-weight: bold;    
}

ul li{
    text-align: center;
    list-style:    none; /*bez odrážek*/
    font-size: large;
    font-weight: bold;
}
ol li{
    text-align: center;
}
hr {
    color: black;
    
}

.KulatyObrazek {
    border-radius: 50%; /*poloměr zakulácení rohů*/
    height: 300px;
    width: 350px;
}
.Navigace {
    text-decoration: none;
    color: black;
    text-align: center;
    font-weight: bold;
    background-color: rgb(242, 214, 224);
    display: inline-block;
    padding: .2em;
    width: 15%;
    line-height: 35px;    
    border: 2px solid;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    margin: auto;
   
}
.Nazev {
    font-family: "Times New Roman", Times, serif;
    font-size: xx-large;
    font-weight: normal;
    font-style: italic;    
}
.Obrazek {
    float:    none;
    clear: both;
    clip: rect(auto, 100px, auto, auto);
    position: relative;
}
div.Text {
    border-radius: 50px;
    width: 300px;
    padding: 25px;
    margin: 25px;
    clear: both;
}
footer {
    padding: 1em;
    color: black;
    background-color: white;
    clear: left;
    text-align: center;
    border-radius: 15px;

}
iframe {
    display: block;  
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    
}
div.Tabulka {
    width: 400px;
    padding: 25px;
    margin: 25px;
    border: 1px solid black;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
}
Kcko
Profil
S čím konkrétně máš problém? Miminálně sniž hodnoty paddingu u tagu body ... (klidně vynuluj) ...
Nikola
Profil
Kcko:
Pokud vynuluju padding tak se mi body roztáhne přes celou stánku a zmizí růžové pozadí
Kcko
Profil
Nikola:
Tak nech bezpečnou hranici, nemusíš to mít v procentech, něco jako 20px nestačí?
Navíc mít tohle povešené na tagu body je zvláštní, řeší se to nějakým wrapperem, body se nechává pro něco jiného.

Pokládám znovu otázku, co konkrétně Ti vadí v tvém responsivním designu?

Základní principy a doporučení nalezneš třeba zde Responsivní design (zační číst články od konce) a pak to chce jen pilovat, zkoušet a tunit.
A můžeš samozřejmě odkoukat techniky a řešení z jiných webů a taky samozřejmě záleží na zkušenosti a oku daného webdesignera jak se dokáže popasovat s responsivitou.
Nikola
Profil
Kcko:
No jak říkám, je to můj první pokus o web, takže co myslíš tim wrappem.
No a vadí mi to, že když si tedy web zobrazím na mobilu, tak např. navigace se mi sice dá podsebe ale je to uplně na sobě a chtěla bych tam merezu, nebo když je víceslovný nadpis a slova se mi dají podsebe tak se to částečně trochu kryje takže tam taky asi nějak mezeru. A to nevím jakvyřešit.
Kcko
Profil
Nikola:
Wrapper je obalový div, kterému se nastavuje šířka a další věci, tag BODY se na to moc nehodí.

Co se týká tvých další věcí, ty s responsivitou nesouvisí, jsou to základní věci v CSS, to na co se konkrétně ptáš

margin (margin-bottom), line-height
Nikola
Profil
Kcko:
Aha, děkuju tím se mi to podařilo vyřešit. A nevíš prosím, jak udělám to, aby uživatel nemohl na mobilu stránku zvětšovat nebo zmenšovat?
Keeehi
Profil
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> nebo user-scalable=no
Značka <meta name=viewport> » Proč <meta> viewport?
Chamurappi
Profil
Reaguji na Nikolu:
jak udělám to, aby uživatel nemohl na mobilu stránku zvětšovat nebo zmenšovat?
Proč bys něco takového chtěl dělat? Tím, že uživateli omezíš funkčnost, něco získáš?
Kcko
Profil
Chamurappi:
Nebud zvědavej, budeš brzo starej ;-)
Nikola
Profil
Keeehi:
Nevím proč, ale nejde mi to:/
Keeehi
Profil
Nikola:
Nevím proč, ale nejde mi to:/
Tak děkujeme za informaci.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: