Problems with bootstrap responsiveness

Question

Problems with bootstrap responsiveness

Asked 5 years, 1 month ago

Viewed 75 times

-3

I’m developing a project, but I’m having problems with responsiveness issues, when the site changes to different screens like: mobile phones, tablets and other devices. It breaks all your layout, I’m using the bootstrap and your tags, but I’m having some difficulties in understanding it.

Investor

    <link href="<?php echo get_template_directory_uri(); ?>/css/meu-estilo.css" rel="stylesheet">

    <link href="<?php echo get_template_directory_uri(); ?>/img/favicon.png" rel="icon">
    <link href="<?php echo get_template_directory_uri(); ?>/img/apple-touch-icon.png" rel="apple-touch-icon">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,400i,500,500i,700,800,900" rel="stylesheet">

    <link href="<?php echo get_template_directory_uri(); ?>/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <link href="<?php echo get_template_directory_uri(); ?>/lib/nivo-slider/css/nivo-slider.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/owlcarousel/owl.carousel.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/owlcarousel/owl.transitions.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/animate/animate.min.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/venobox/venobox.css" rel="stylesheet">


    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/https://www.w3schools.com/w3css/4/w3.css">
    <script src="<?php echo get_template_directory_uri(); ?>/lib/jquery/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/venobox/venobox.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/knob/jquery.knob.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/wow/wow.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/parallax/parallax.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/easing/easing.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/nivo-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/appear/jquery.appear.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/isotope/isotope.pkgd.min.js"></script>

    <script src="<?php echo get_template_directory_uri(); ?>/contactform/contactform.js"></script>

    <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

    <link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet">

    <link href="<?php echo get_template_directory_uri(); ?>/css/responsive.css" rel="stylesheet">

</head>

<body>      

    <header>
        <!-- header-area start -->
        <div  class="header-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12">

                        <!-- Navigation -->
                        <nav class="navbar navbar-default">
                            <!-- 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>
                                <!-- Brand -->
                                <a class="navbar-brand page-scroll sticky-logo" href="index.html">
                                    <img src="<?php echo get_template_directory_uri(); ?>/imgBlue/logoUltra.png" class="Logo">
                                    <!-- Uncomment below if you prefer to use an image logo -->
                                    <!-- <img src="img/logo.png" alt="" title=""> -->
                                </a>
                            </div>
                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse main-menu bs-example-navbar-collapse-1" id="navbar-example">
                                <ul class="nav navbar-nav  " style="margin-left:395px;">
                                    <li>
                                        <a class="page-scroll " href="/index"><b>A Blue</b></a>
                                    </li>
                                    <li>
                                        <a class="page-scroll" href="/negocios"><b>Nossos Negócios</b></a>
                                    </li>
                                    <li>
                                        <a class="page-scroll" href="/investir"><b>Porque Investir</b></a>
                                    </li>
                                    <li>
                                        <a class="page-scroll" href="/social"><b>Blue Social</b></a>
                                    </li>
                                    <li>
                                        <a class="page-scroll" href="/contato"><b>Contato</b></a>
                                    </li>
                                </ul>
                            </div>
                            <!-- navbar-collapse -->
                        </nav>
                        <!-- END: Navigation -->
                        <div onclick="scrollToTop" class="retangulo">
                            <a class="arrumarInvestidor" href="/investidor"><b>Área do Investidor</b></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header-area end -->
    </header>
    <!-- header end -->


    <div class="container-fluid" style="padding-right: 0; padding-left: 0">
        <div class="row">
            <div class="col-md-6 col-sm-12 col-lg-12">
                <img src="<?php echo get_template_directory_uri(); ?>/imgBlue/ImagemBlueBackGround.jpg" class="">                    


                <form class="w3-container w3-card-4" action="/action_page.php" style="
                      position: absolute;
                      bottom: 218px;
                      left: 439px;
                      ">


                    <input class="w3-input w3-border" name="first" type="text" style="
                           width: 489px;
                           height: 53px;
                           " placeholder="Usuário">
                    <br>
                    <br>
                    <input class="w3-input w3-border" name="last" type="text" style="
                           width: 489px;
                           height: 53px;
                           " placeholder="Senha">
                    <br>
                    <br>

                    <button class="btn btn-default" type="submit" style="
                            float: left;
                            margin-left: 138px;
                            width: 243px;
                            height: 53px;
                            ">Entrar</button>

                </form>


            </div>


        </div>
    </div>

     <footer>
        <div class="footer-area" style="background-color: #c7c8ca;">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2">


                        <div class="col-md-8"><h5 class="abluefooter"><b><a href="/index">A blue</a></b></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#quemSomos">Quem somos</a> </h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#atuacao">Atuação</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo">Core Business</h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#valores">Valores </a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#qualificaoTecnica">Qualifação técnica</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#parceiros">Parceiros</a></h5></div>
                    </div>

                    <div class="col-md-2">

                        <div class="col-md-8"><h5 class="nossos"><b><a href="/negocios">Nossos negócios</a></b></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/negocios#linhaTempo">Linha do tempo</a></h5></div>

                    </div>

                    <div class="col-md-2">

                        <div class="col-md-8"><h5 class="nossos"><a href="/investir">Porque Investir</a></h5></div>
                        <div class="col-md-8"><h5 class="m"><a href="/investir#modeloInvestimentos">Modelo de investimentos</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/investir#vantagens">Vantagens</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/investir#modeloNegocio">Modelo de negócio</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/investir#compliance">Compilance</a></h5></div>
                    </div>


                    <div class="col-md-2">

                        <div class="col-md-8"><h5 class="nossos"><a href="/social">Blue Social</a></h5></div>
                        <div class="col-md-8"><h5 class="m"><a href="/social#blueSocial">Responsabilidade Social</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/social#comoFunciona">Como funciona</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/social#instituicoes">Instituições</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/social#apoiamAcausa">Eles apoiam a causa</a></h5></div>
                    </div>


                    <div class="col-md-2">

                        <div class="col-md-8"><h5 class="nossos"><a href="/contato">Contato</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/contato#conosco">Compramos seu terreno </a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/contato#conosco">Trabalhe conosco</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/contato#localizacao">Localização</a></h5></div>
                    </div>

                </div>


                <div class="col-md-5"><img src="<?php echo get_template_directory_uri(); ?>/imgBlue/logoUltra.png" class="logoFooter"></div>
                <div class="col-md-7">
                    <p class="a"><b>BLUE</b></p>
                    <p class="rua">Rua Kalil Elias Warde, 219 </p>
                    <p class="ruaCampina">Campina do Siqueira - Curitiba - PR</p>
                    <p class="number">(41) 3090.3690 &nbsp;(41) 3090.3662</p>
                    <p class="e">[email protected]</p>
                </div>
            </div>
        </div>


    </footer>

</body>

Site screen link: http://blueholding.hqssolucoes.com.br/investidor/

1

Face this is a Wordpress Template, has a bit of class that is not Bootstrap, and the code that you posted there is not even close to similar to the code that is in the link that you posted... It also seems that tb has classes of w3css mixed with bootstrap. I recommend that you edit your question and put the code in a minimal way that to simulate your problem

– hugocsl

2019/08/28 at 13:44

1 answer

Browser other questions tagged html css bootstrap-3

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

by Juliano Henrique • **271** points · Answer 1 · 2019-08-28T13:41:29+00:00

Understanding the concept of rows and columns on the grid you can have a better understanding of how to assemble your layouts so that the responsiveness is not deformed.

In your code you created a grid system that occupies half of the columns in the center using a col-Md-6, that is to say for above 1200px the content will be divided between two parts. Note also that in this code you did not create line to delimit your contents vertically.

So focus on creating a normal container first, then you create a Row inside that container, and inside the roll you’ll delimit the columns.

<div class="container fixed col-lg-4 col-sm-2">
              <div id = "rowAttribute"class="row products justify-content-center">
                   <div class = "col-md-3"> aqui ficará um conteudo que ocupará 1/3 das 12 colunas do grid </div>
                   <div class = "col-md-3"> aqui ficará um conteudo que ocupará 1/3 das 12 colunas do grid</div>
                   <div class = "col-md-3"> aqui ficará um conteudo que ocupará 1/3 das 12 colunas do grid</div>
              </div>
          </div>

I share a link that will help you a lot in understanding grids. https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background