Problems with fullpage site

Asked

Viewed 48 times

0

I am with the following problem I am developing a site that uses a plugin called jquery full page and Bootstrap in the desktop version it works normally but in the mobile version it is all "Buggy" it is like not recognizing the grids of Bootstrap see the website here. Someone could help me I don’t know if there’s any kind of conflict between these frameworks follows an excerpt from the code html of the site:

HTML:

{{--Menu--}}
<div id="right-menu" class="text-right hidden-xs hidden-sm">
    <div class="vertical"></div>
    <ul id="menu" class="list-unstyled">
        <li data-menuanchor="home"><a href="#home">Home</a></li>
        <li data-menuanchor="services"><a href="#services">Serviços</a></li>
        <li data-menuanchor="about"><a href="#about">Sobre</a></li>
        <li data-menuanchor="franchise"><a href="#franchise">Franquia</a></li>
        <li data-menuanchor="contact"><a href="#contact">Contato</a></li>
    </ul>
</div>

<div id="fullpage">
    {{--Home--}}
    <section class="section home" data-anchor="home">
        <nav class="navbar navbar-default hidden-md hidden-lg">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-left">
                        <li class="list"><a href="#home" class="link">Home</a></li>
                        <li class="list"><a href="#services" class="link">Serviços</a></li>
                        <li class="list"><a href="#about" class="link">Sobre</a></li>
                        <li class="list"><a href="#franchise" class="link">Franquia</a></li>
                        <li class="list"><a href="#contact" class="link">Contato</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <div class="container">
            <div class="row text-left">
                <div class="col-md-6 home-info">
                    <img src="{{ asset('img/jetwash-logo.png') }}" class="img-responsive logo" alt="jetwash">
                    <span class="subtitle">Tudo para seu carro</span>
                    <ul id="ticker" class="list-unstyled">
                        <li class="list">Limpeza Técnica de Motor</li>
                        <li class="list">Enceramento 3M</li>
                        <li class="list">Higienização</li>
                        <li class="list">Polimento 3M</li>
                        <li class="list">Película Anti-vandalismo 3M</li>
                        <li class="list">E muito mais confira</li>
                    </ul>
                    <div class="provide-services">
                        <h5 class="subtitle">Prestamos serviços em concessionárias e montadoras</h5>
                        <h5 class="subtitle">Fazemos preparação de veículos para comerciais, eventos e feiras.</h5>
                        <h3 class="title">Nossa equipe é treinada e certificada para realizar a manutenção dos carros, deixando os sempre limpos e        brilhando.</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>
bootstrap-3 fullpage.js

  • define "Bugado", I died and to me it seemed normal, some things seem a little "small" of more in the mobile, but otherwise it does not seem any incompatibilidate

  • 1

    I always thought this would be Onepage!

  • face if access a celualr it for example does not activate the mobile menu and as if the screen zoom out

1 answer

1


This responsiveness problem occurs because of the plugin, it limits your screen to at least 980px, was testing the mobile version and when I took the plugin worked, hence the author’s plugin Alvaro Trigo need screen limit , if you want to do responsibly you will need to buy the responsiveness extension.

I found this other plugin here, looking at his example, it works without touching the responsiveness link, maybe it’ll do for you.

Browser other questions tagged bootstrap-3 fullpage.js

You are not signed in. Login or sign up in order to post.