NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Jakub Bezr
Člen
Avatar
Jakub Bezr:27.5.2017 10:40

Zdravím komunitu,
nedávno jsem se začal učit psát kód (html a css) a pomalu pronikám do tohoto světa. Narazil jsem teď ovšem na problém, kterého se nedokážu zbavit. Nejspíš to bude jenom nějaká banalita, ale já jí prostě nedokážu najít. Při zobrazení stránky v mobilu je horní menu širší než by mělo být. (viz. obrázek). Dělám to do stažené šablony, která v originále je plně kompatibilní se všemi zařízeními, takže jsem to někde pokazil já. Je to celkem dost kódu, tak nevím, jestli má smysl to dávat přímo sem všechno. Pokud je mezi vámi nějaká dobrá duše, co by při sobotě chtěla pomoc klukovi, který se zamotal v kódu, byl bych moc rád, když se ozvete :)
Přeju hezký den všem.

 
Odpovědět
27.5.2017 10:40
Avatar
Erik Bystroň
Člen
Avatar
Erik Bystroň:27.5.2017 10:52

Určitě sem hoď ten kód, nezastavil si někde špatně šířku?

 
Nahoru Odpovědět
27.5.2017 10:52
Avatar
Jakub Bezr
Člen
Avatar
Jakub Bezr:27.5.2017 10:57

To právě nevím. Jsem vážně pouze začátečník a šablona, ve které jsem se začal šťourat je úplně jiný level. Jenže nevím, čím bych do toho záhlaví mohl zasáhnout, měnil jsem snad pouze položky v menu, a ty by na to neměly mít vliv.
HTML záhlaví

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="index.html">
                    <h1>NF Lauren</h1>
                </a>
            </div>
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#intro">Domů</a></li>
        <li><a href="#about">Kdo jsme</a></li>
                <li><a href="#cile">Plány a cíle</a></li>
        <li><a href="#contact">Kontakty</a></li>
      </ul>
            </div>
        </div>
    </nav>

CSS pro media

@media(min-width:767px) {

    .navbar {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
        background-color: #000;
    }

    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255,255,255,.3);
    }

    .intro {
        height: 100%;
        padding: 0;
    }

    .brand-heading {
        font-size: 100px;
    }


    .intro-text {
        font-size: 25px;
    }


}
@media (max-width:768px) {

        .team.boxed-grey {
                margin-bottom: 30px;
        }

        .boxed-grey {
                margin-bottom: 30px;
        }


}

@media (max-width:480px) {

        .navbar-custom .nav.navbar-nav {
    background-color: rgba(255,255,255,.4);
        }

        .navbar.navbar-custom.navbar-fixed-top {
                margin-bottom: 30px;
        }

        .tp-banner-container {
                padding-top:40px;
        }

        .page-scroll a.btn-circle {
                width: 40px;
                height: 40px;
                margin-top: 10px;
                padding: 7px 0;
                border: 2px solid #fff;
                border-radius: 50%;
                font-size: 20px;
        }

}
 
Nahoru Odpovědět
27.5.2017 10:57
Avatar
Petr Čech
Tvůrce
Avatar
Petr Čech:27.5.2017 13:02

Je to šablona postavená na Bootstrapu, kdyby jsi se v tom chtěl šťourat víc.
A problém s velkou pravděpodobností není v menu, ale v tom, že ve stránce je někde element, který je širší něž má být, a menu jen následuje tento fakt. Zkus si hrát s vývojářskými nástroji v prohlížeči a odstraňovat různé části stránky. Nakonec bys měl přijít na to, co je tak moc široké.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
27.5.2017 13:02
the cake is a lie
Avatar
Jakub Bezr
Člen
Avatar
Jakub Bezr:27.5.2017 13:53

Moc děkuji za rady. V pozadí intra byl obrázek a měl nastavený repeat-x, to to dělalo.

 
Nahoru Odpovědět
27.5.2017 13:53
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 5 zpráv z 5.