Responsive Site

Asked

Viewed 112 times

0

The thing is, I’m having a hard time modifying a footer on my website. I’m using Bostrap to style the site, but wanted to leave the radapé in two columns on mobile devices.

The structure of my website is as follows:

CSS:

@media (max-width: 1023px) {
  .footer-widget-container{
    /*display: -webkit-flex;
    display: -ms-flexbox;*/
    display:flex;
    max-width: 100%;
    min-width: 100%;
    height: auto;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="footer-align">
                    <div class="footer-widget col-xs-3 col-lg-2">
                        <h4 class="footer-widget__title">Políticas</h4>
                        <ul class="nav">
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/como-comprar" class="nav-link">Como comprar?</a> </li>
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/como-vender" class="nav-link">Como vender?</a> </li>
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso" class="nav-link">Termo de Uso</a> </li>
                            <!--
                <li class="nav-item">
                  <a href="/privacidade" class="nav-link">Política de Privacidade</a>
                </li>
                -->
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso#politica-de-pagamento" class="nav-link">Política de Pagamento</a> </li>
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso#politica-de-entrega" class="nav-link">Política de Entrega</a> </li>
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso#trocas-devolucoes" class="nav-link">Política de Trocas e Devoluções</a> </li>
                        </ul>
                    </div>
                    </div>
                    <div class="footer-widget col-xs-3 col-lg-2">
                        <h4 class="footer-widget__title">Institucional</h4>
                        <ul class="nav">
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/quem-somos" class="nav-link">Quem somos</a> </li>
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/curadores" class="nav-link">Curadores</a> </li>
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/imprensa" class="nav-link">Imprensa</a> </li>
                            <!--
                <li class="nav-item">
                  <a href="/mapa-do-site" class="nav-link">Mapa do site</a>
                </li>
                -->
                        </ul>
                    </div>
                    <div class="footer-widget col-xs-3 col-lg-2">
                        <h4 class="footer-widget__title">Atendimento</h4>
                        <ul class="nav">
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/#atendimento-telefone" class="nav-link open-lightbox">Via Telefone</a> </li>
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/#atendimento-chat" class="nav-link open-lightbox">Via Chat</a> </li>
                            <li class="nav-item"> <a href="mailto:[email protected]" class="nav-link">Via E-mail</a> </li>
                        </ul>
                    </div>
                    <div class="footer-widget col-xs-3 col-lg-2">
                        <h4 class="footer-widget__title">Dúvidas</h4>
                        <ul class="nav">
                            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/ajuda" class="nav-link">F.A.Q.</a> </li>
                        </ul>
                    </div>

I would like to know how to put the first div in a column on the left and how to put the other three Divs in a single column on the right.

Thank you for your attention

Hugs!!!

html css twitter-bootstrap

  • I’m using this model only for studies

  • Next time inform the technology used, if it is not difficult to be sure ;D

2 answers

0


The numbers in the classes col-**-* range from 1 to 12. If you want to divide into two columns, you say each div will occupy 6 parts. If you want to divide it into 3 columns, you say that the div will occupy 4 parts (4+4+4 = 12). In case to apply only on mobile, you use col-Xs-*

To occupy 2 columns in mobile, you place the class . col-Xs-6, in the example below you will have 2 main columns, being the second column, divided into 3.

<div class="footer-align">
    <div class="footer-widget col-xs-6 col-lg-2">
        <h4 class="footer-widget__title">Políticas</h4>
        <ul class="nav">
            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/como-comprar" class="nav-link">Como comprar?</a> </li>
            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/como-vender" class="nav-link">Como vender?</a> </li>
            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso" class="nav-link">Termo de Uso</a> </li>
            <!--<li class="nav-item"><a href="/privacidade" class="nav-link">Política de Privacidade</a></li>-->
            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso#politica-de-pagamento" class="nav-link">Política de Pagamento</a> </li>
            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso#politica-de-entrega" class="nav-link">Política de Entrega</a> </li>
            <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso#trocas-devolucoes" class="nav-link">Política de Trocas e Devoluções</a> </li>
        </ul>
    </div>
    <div class="footer-widget col-xs-6 col-lg-2">
        <div class="footer-widget col-xs-4 col-lg-2">
            <h4 class="footer-widget__title">Institucional</h4>
            <ul class="nav">
                <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/quem-somos" class="nav-link">Quem somos</a> </li>
                <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/curadores" class="nav-link">Curadores</a> </li>
                <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/imprensa" class="nav-link">Imprensa</a> </li>
                <!--<li class="nav-item"><a href="/mapa-do-site" class="nav-link">Mapa do site</a></li>-->
            </ul>
        </div>
        <div class="footer-widget col-xs-4 col-lg-2">
            <h4 class="footer-widget__title">Atendimento</h4>
            <ul class="nav">
                <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/#atendimento-telefone" class="nav-link open-lightbox">Via Telefone</a> </li>
                <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/#atendimento-chat" class="nav-link open-lightbox">Via Chat</a> </li>
                <li class="nav-item"> <a href="mailto:[email protected]" class="nav-link">Via E-mail</a> </li>
            </ul>
        </div>
        <div class="footer-widget col-xs-4 col-lg-2">
            <h4 class="footer-widget__title">Dúvidas</h4>
            <ul class="nav">
                <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/ajuda" class="nav-link">F.A.Q.</a> </li>
            </ul>
        </div>
    </div>
</div>

  • R. Oliveira, thank you very much for your reply. Unfortunately this solution didn’t work, some other part of CSS should be overwriting Boostrap. I made a "fit" worked the way I did. Thank you very much. I’ll leave the solution I got. Hugs!

0

Unfortunately the solution that Givanildo gave me didn’t work for me. So what I did.

It was the following:

I cloned the class footer-align which is one of the classes in my first column, I put the class above before the classes footer-widget col-Xs-3 col-lg-2 of the second column of items (Institutional).

The code was as follows:

@media (max-width: 1023px) {
  .footer-align {
    float: left;
    max-width: 40%;
    max-height: 100%;
    min-width: 40%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    margin-left: -1em;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="footer-align">
  <div class="footer-widget col-xs-3 col-lg-2">
    <h4 class="footer-widget__title">Políticas</h4>
    <ul class="nav">
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/como-comprar" class="nav-link">Como comprar?</a> 
      </li>
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/como-vender" class="nav-link">Como vender?</a> 
      </li>
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso" class="nav-link">Termo de Uso</a> 
      </li>
      <!--
                <li class="nav-item">
                  <a href="/privacidade" class="nav-link">Política de Privacidade</a>
                </li>
                -->
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso#politica-de-pagamento" class="nav-link">Política de Pagamento</a> 
      </li>
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso#politica-de-entrega" class="nav-link">Política de Entrega</a> 
      </li>
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/termos-de-uso#trocas-devolucoes" class="nav-link">Política de Trocas e Devoluções</a> 
      </li>
    </ul>
  </div>
</div>

<div class="footer-align">
  <div class="footer-widget col-xs-3 col-lg-2">
    <h4 class="footer-widget__title">Institucional</h4>
    <ul class="nav">
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/quem-somos" class="nav-link">Quem somos</a> 
      </li>
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/curadores" class="nav-link">Curadores</a> 
      </li>
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/imprensa" class="nav-link">Imprensa</a> 
      </li>
      <!--
                <li class="nav-item">
                  <a href="/mapa-do-site" class="nav-link">Mapa do site</a>
                </li>
                -->
    </ul>
  </div>
  <div class="footer-widget col-xs-3 col-lg-2">
    <h4 class="footer-widget__title">Atendimento</h4>
    <ul class="nav">
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/#atendimento-telefone" class="nav-link open-lightbox">Via Telefone</a> 
      </li>
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/#atendimento-chat" class="nav-link open-lightbox">Via Chat</a> 
      </li>
      <li class="nav-item"> <a href="mailto:[email protected]" class="nav-link">Via E-mail</a> 
      </li>
    </ul>
  </div>
  <div class="footer-widget col-xs-3 col-lg-2">
    <h4 class="footer-widget__title">Dúvidas</h4>
    <ul class="nav">
      <li class="nav-item"> <a href="http://sandbox.freakmarket.com.br/ajuda" class="nav-link">F.A.Q.</a> 
      </li>
    </ul>
  </div>
</div>
This way I got the result I was trying to achieve.

Hugs!

  • 1

    Do not use the code snippet if not to reproduce the problem, snippet code is to execute js+css+html, if only to "show" the code use the "Code Sample" (is the button with this drawing { }), understand how to use the code snippet: http://meta.pt.stackoverflow.com/a/4463/3635 and http://meta.pt.stackoverflow.com/a/5640/3635

  • Oops, sorry. Thanks for the tip!!!

Browser other questions tagged html css twitter-bootstrap

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