Diskuze: responzivni zobrazeni na mobilu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Jan Jedlička

Člen

Jan Jedlička:23.2.2018 20:45

Potreboval bych poradit, kde delam chybu. Zacinam se teprve ucit responzivni nastaveni stranek. Mam 5,5" mobil a nezobrazuje se mi dobre web v chromu. Kdyz stranku nactu, mam asi 1cm oriznutou stranku na prave strane. V tabletu se mi ukazuje dobre jak na vysku tak i sirku, v mobilu pouze na sirku. děkuji za jakoukoliv pomoc

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <link rel="stylesheet" type="text/css" href="stylcss.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div id="lista">
          <h1><span class="highlight">H</span>elp<span class="highlight">B</span>ike</h1>
        </div>
        <nav>
          <ul>
            <li class="current"><a href="index.html">Domů</a></li>
            <li><a href="price.html">Ceník</a></li>
            <li><a href="photo.html">Fotogalerie</a></li>
            <li><a href="contact.html">Kontakt</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <section id="showcase">
      <div class="container">
        <h1>Servis jízdních kol</h1>
        <p>Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století. </p>
      </div>
    </section>

    <section id="newsletter">
      <div class="container">
        <h1>Máte zájem o servis?</h1>
        <form>
          <input type="email" placeholder="zadejte email...">
          <button type="submit" class="button_1">Odeslat</button>
        </form>
      </div>
    </section>

    <section id="boxes">
      <div class="container">
        <div class="box">
         <img src="./obr/servis.png">
         <h3>Servis</h3>
         <p>Klasické pasáže Lorem Ipsum z 16. století jsou reprodukovány níže. Kapitoly 1.10.32 a 1.10.33 z "De Finibus Bonorum et Malorum" od Cicera najdete v původní podobě doplněné o anglický překlad z roku 1914 od H. Rackhama.</p>
         </div>
         <div class="box">
         <img src="./obr/design.png">
         <h3>Renovace</h3>
         <p>Klasické pasáže Lorem Ipsum z 16. století jsou reprodukovány níže. Kapitoly 1.10.32 a 1.10.33 z "De Finibus Bonorum et Malorum" od Cicera najdete v původní podobě doplněné o anglický překlad z roku 1914 od H. Rackhama.</p>
         </div>
      </div>
    </section>

    <footer>
      <p>HelpBike design, Copyright &copy;2018</p>
    </footer>


  </body>
</html>

/* global SETTING */
body {font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      line-height: 1.5;
      padding: 0;
      margin: 0;
      background-color: #f4f4f4;
}

.container {width: 80%;
            margin: auto;
            overflow:hidden;
}

ul {margin: 0;
    padding:0;
}

.button_1 {height: 25px;
           background: orangered;
           border: 0;
           border-radius: 9px 9px;
           padding-left: 20px;
           padding-right: 20px;
           color: white;
           margin-left: 3px;
}
/* header SETTING */
header {background:#35424a;
        color: white;
        padding-top: 30px;
        min-height: 70px;
        border-bottom: 5px solid rgb(228,228,228);
}

header a {color:white;
          text-decoration: none;
          text-transform: uppercase;
          font-size: 13px;
}


header li {display: inline;
           padding: 0 10px 0 10px;
}

header #lista {float: left;}

header #lista h1 {margin:0}

header nav {float: right;
            margin-top:10px;
}

header .highlight, header .current a {color:orangered;
                   font-weight: bold;
}

header a:hover {color: #cccccc;
                font-weight: bold;
}
/* showcase SETTING */
#showcase {min-height: 270px;
           background: url("./obr/showcase.png") no-repeat 0 -190px;
           color: white;
           text-align: center;
           text-shadow: 0.5px 0.5px 1px black;
}


#showcase h1 {margin-top: 65px;
              font-size: 35px;
              margin-bottom: 10px;
}

#showcase p{font-size: 16px;
}
/* newsletter SETTING */
#newsletter {padding: 15px;
             color: white;
             background: #35424a
}

#newsletter h1 {float: left;}

#newsletter form {float: right;
                  margin-top:21px;
}

#newsletter input[type="email"]{padding:4px;
                                height: 25px;
                                width: 250px;
                                border-radius: 10px 10px;
}
/* boxes SETTING */
#boxes {margin-top: 20px;
}

#boxes .box {float: left;
             text-align: center;
             width: 35%;
             padding: 10px;
             overflow: auto;
}

#boxes .box img {width: 70px;}

/* footer SETTING */
footer {padding:10px;
        margin-top: 10px;
        font-weight: bold;
        color:black;
        background-color:  rgb(228,228,228);
        text-align: center;
}

/* media SETTING */
@media(max-width: 760px){
      header #lista,
      header nav,
      header nav li,
      #newsletter h1,
      #newsletter form,
      #boxes .box,
      #boxes .box p      {float: none;
                        text-align: center;
                        width:100%;
                       }
      header {padding-bottom: 15px;}
      #newsletter .container  h1{margin-top: 10px;}
      #newsletter .button {display:block;
                            width:100%;}
      #newsletter form input[type="email"] {
                            width: 100%;
                            margin-bottom: 5px;}
}

Odpovědět

23.2.2018 20:45

Marek Mansor Fojtl

Člen

Marek Mansor Fojtl:23.2.2018 21:39

Ahoj,
tento kód jsem testoval v prohlížeči na PC, přes nástroj Chromu, který umí udělat responzivní nastavení a všude to funguje jak by mělo.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Já tam tedy ještě píšu INITIAL-SCALE

Editováno 23.2.2018 21:41

Nahoru Odpovědět

23.2.2018 21:39

PHP

Jan Jedlička

Člen

Jan Jedlička:23.2.2018 21:51

Aha, jeste jsem zjistil, ze dole pod logem servisniho klice mam trochu oriznuty text.

Nahoru Odpovědět

23.2.2018 21:51

Lukáš Undatra

Člen

Lukáš Undatra:28.2.2018 9:35

Ať chutná :-)
https://www.toprecepty.cz/…ci-z-pryglu/

Nahoru Odpovědět

28.2.2018 9:35

Ajťařina to je dřina

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.