Responsive Site

Navigation
0

This is the following, I'm having trouble modifying a footer on my site. I am using Bostrap to style the site, however I wanted to leave the radapé in two columns on mobile devices.

The structure of my site 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.

Thanks for the attention

Hugs!

    
asked by anonymous 19.01.2017 / 20:27

2 answers

0

The numbers in the col - ** - * classes range from 1 to 12. If you want to divide into two columns, you say that each div will occupy 6 parts. If you want to divide 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, the second column being 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>
    
19.01.2017 / 21:00
0

Unfortunately the solution that Givanildo gave me did not work for me. So what I did.

It was as follows:

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

The code looks like this: 

@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>
In this way I got the result I was trying to achieve.

Hugs!

    
20.01.2017 / 02:13
Eclipse c ++ Neon does not recognize Toolchain Error getting value of property through reflection