PC-HELP.CZ

Ahoj, mám zhruba tento kod:
-a potřeboval bych prosím poradit, jak prvkům formuláře INPUTům:) řekněme při šířce stránky pod 360px dát menší šířku, aby nebyly tak roztáhlé a nadpisy Label byly pěkně pod sebou nebo nad INPUTy .
A při šířce stránky nad 360px aby se INPUTy formuláře řadily vedle sebe, nevím už jak na to:( když dám width na 50% , tak zase nadpisy nejsou pod sebou a pri vetsi sirce se nic nezmení na normální formulář:( vse je porad pod sebou a ne vedle sebe. Děkuju Vám
css:
<style>>

.container{ padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height:600px; 
 }

.content{ text-align: center;
            }	
            
@media screen and (max-width:360px){
                                     .container{ padding: 0;
                                      margin: 0;
                                      list-style: none;
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      height:300px; 
                                     }
  }
  
                                .content{ text-align: center;
                                            }	
                                form label{width: 100%;}
                                form input{width:100%; 
                                           margin-top:5px;
                                           margin-left: auto;}
                                            }
    </style>        
  
  <html>
  <head>
  <meta name="viewport content=width=device-width, initial-scale=1.0">
  </head>
  
  <body>
  <div class="container">
 <div class="content"> 
 
 <form method="POST">
<label><b>Jmeno:</b></label>
<input type="text" id="text" name="jmeno" size="20" placeholder="např. vaše jmeno" />
<label><b>Příjmení:</b></label>
<input type="text" id="text" name="prijmeni" size="20" placeholder="např. vaše příjmení"/>
<label><b>Věk:</b></label>
<input type="text" id="text" name="vek" size="20" placeholder="např. věk"/>
<input type="submit" value="odeslat" name="odeslat">
</form>
 </div> 
 </div>
 </body>
 </html>

Vytvořil jsem vlastní řešení, z něho se můžeš inspirovat:

Kód: Vybrat vše

<!doctype html>
<html lang="cs">
    <head>
        <meta charset="utf-8">
        <title>Formulářové prvky</title>
        <style>
            *
            {
                box-sizing: border-box;
            }
            
            form
            {
                display: flex;
                justify-content: center;
            }
            
            div
            {
                margin: 0 0.5rem;                    
            }

            @media only screen and (max-width: 800px)
            {
                body
                {
                    display: flex;
                    justify-content: center;
                }

                form
                {
                    flex-flow: column;
                }   
                
                div
                {
                    margin: 0.5rem 0;                    
                }

                label
                {
                    display: block;
                }
            }
        </style>        
    </head>
    <body>
        <form>
            <div>
                <label>Jméno</label>
                <input type="text">
            </div>
            <div>
                <label>Přijmení</label>
                <input type="text">
            </div>
            <div>
                <label>Věk</label>
                <input type="text">
            </div>
            <div>
                <input type="submit" value="Odeslat">
            </div>
        </form>
    </body>
</html>

Ohledně bodu zlomu, v mém příkladu jsem použil hodnotu 800 px, 360 px je velmi málo pro to, aby se mohly řadit vedle sebe. Více o flexboxu se dočteš např. na https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – velmi dobře zpracovaný návod ohledně toho, co vše flexbox umí.

Jinak k tebou poskytnutému kódu mám ještě připomínky:

dávej si pozor na složené závorky a uvozovky, občas ti někde utekly;
styl kódování – bylo by vhodné, aby byl v rámci souboru stejnorodý (odsazení apod.);
identifikátor (id) musí být v rámci dokumentu unikátní, tj. může být použit jen a pouze u jednoho elementu;
CSS vlastnosti nějaké třídy nemusíš redundantně psát v media queries, do nich piš jen vlastnosti, které opravdu měníš – ostatní budou zděděny.

PC-HELP.CZ

Pomoc s responsivnim html, css kodem

Pomoc s responsivnim html, css kodem

Re: Pomoc s responsivnim html, css kodem