Diskuze: Problém s responzivním zobrazením

Jakub Bezr

Člen

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

Erik Bystroň

Člen

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

Jakub Bezr

Člen

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

Petr Čech

Tvůrce

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č

Nahoru Odpovědět

27.5.2017 13:02

the cake is a lie

Jakub Bezr

Člen

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.