2

Gostaria de deixar minha section igual dessa página aqui observem que logo abaixo do header a 3 objetos circulares com titulo e texto e quando você redimenciona a tela um vai pra baixo do outro estou querendo fazer algo assim só que ao invez de utilizar imagens eu utilizo o font-awelsome que e mais facil porem não consigo deixar o texto certinho igual o da imagem e o efeito de redimencionamento ta meio bugado

#sessao-1 {
  text-align: center;
  color: #000;
  font-family: Gabriola;
  margin-top: 750px;
}
#sessao-1 h1 {
  font-size: 3em;
}
#sessao-1 #texto-sessao {
  width: 550px;
  max-width: 85%;
  margin: -30px auto;
  font-size: 1.1em;
}
.info {
  margin: 70px auto;
  text-align: center;
}
.info p {
  width: 350px;
  max-width: 85%;
  margin: -20px auto;
  text-align: center;
  font-size: 1.1em;
}
.info li {
  display: inline-block;
}
.info li i {
  color: #222;
  margin: 30px;
  font-size: 2em;
  width: 5px;
  text-align: center;
  border: 2px solid #222;
  border-radius: 50%;
}
<section id="sessao-1">
  <h1>Porque nos escolher</h1>
  <p id="texto-sessao">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  <ul class="info">
    <li>
      <a href="#">
        <i class="fa fa-code"></i>
        <br/>Codigo Semantico</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>

    <li>
      <a href="#"><i class="fa fa-heart"></i><br/>Layout responsivo</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>

    <li>
      <a href="#"><i class="fa fa-plus"></i>Otima qualidade</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>
  </ul>
</section>

aqui na minha tela fica ruim segue a screenshot: inserir a descrição da imagem aqui

Oque estou fazendo errado?

Obs: No mozila por exemplo um fica em cima do outro não entendo porque

3 Respostas 3

3

Isso é porque é necessário usar também media queries em ordem para alcançar o pretendido:

.info li {
    display: inline-block;
    width: 180px;
    vertical-align:top;
}
/* Isto aplica o CSS desejado para telas com a resolução menor ou igual a - 600px */
@media only screen and (max-width: 600px) {
    .info li {
        width: 100%;
        margin:10px 0;
    }
}

Aqui tens um Exemplo Online no JsFiddle. Arrasta a janela de resultados para veres as media queries em acção. Eu alterei e arranjei também alguns outros parâmetros no HTML e no CSS.

3

O site de exemplo que vc citou utiliza a foundation.css. Estava faltando linkar a CSS. Veja:

    #sessao-1 {
      text-align: center;
      color: #000;
      font-family: Gabriola;
      margin-top: 750px;
    }
    #sessao-1 h1 {
      font-size: 3em;
    }
    #sessao-1 #texto-sessao {
      width: 550px;
      max-width: 85%;
      margin: -30px auto;
      font-size: 1.1em;
    }
    .info {
      margin: 70px auto;
      text-align: center;
    }
    .info p {
      width: 350px;
      max-width: 85%;
      margin: -20px auto;
      text-align: center;
      font-size: 1.1em;
    }
    .info li {
      display: inline-block;
    }
    .info li i {
      color: #222;
      margin: 30px;
      font-size: 2em;
      width: 5px;
      text-align: center;
      border: 2px solid #222;
      border-radius: 50%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://www.egrappler.com/responsive-app-landing-page/css/foundation.min.css" rel="stylesheet"/>
    <section id="sessao-1">
      <h1>Porque nos escolher</h1>
      <p id="texto-sessao">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <ul class="info">
                <li>
                    <a href="#">
                        <i class="fa fa-code"></i>
                        <br/>Codigo Semantico</a> <br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                </li>

                <li>
                    <a href="#"><i class="fa fa-heart"></i>
                        <br/>Layout responsivo</a><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                </li>

                <li>
                    <a href="#"><i class="fa fa-plus"></i>
                        <br>Otima qualidade</a><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </li>
            </ul>
        </section>

3
  • entao amigo vi aqui seu exemplo porem sabe esses "titulos" eles nao descem ficam ao lado do icone nno caso eu so citei quele site como exemplo de como queria que fica-se no final qiue era oque estava tentando ai testei seu codigo e funcionou porem nao tudo 26/06/2015 às 20:20
  • Você quer que os ícones estejam sempre acima do título, ou só quando redimensionar a página? Essa forma que vc está usando, com o ícone dentro da lista, gera uma distorção do lado da imagem, por causa do marcador da lista. É isso mesmo que vc quer? Estou vendo aqui se consigo uma solução, mas se vc quisesse algo igual, mas com o Bootstrap, seria bem mais simples fazer com divs, pelo sistema de grid.
    – gustavox
    26/06/2015 às 20:49
  • 1
    Editei o código da resposta, fazendo da forma que acho que vc queria (utilizando <br>), mas a forma que o @Chun postou abaixo é muito mais que só mais elegante, é o correto a ser feito. ;)
    – gustavox
    26/06/2015 às 21:00
1

Uma coisa é fato, se vc tentar mudar as características de dimensão de um componente inline, ele não vai aceitar. No seu caso, a tag que serve para colocar o font-awesome é inline. Se colocar display: inline-block, o background vai ficar redondo... Perceba que seu círculo ocupa espaço de uma letra...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .