0

Preciso que o site seja todo responsivo.

Eu to usando bootstrap.

do jeito como está na imagem em baixo:

div 3d

--> meu codigo HTML<--

                <div class="col-sm-4 ">
                    <div class="">
                        <img class="img-responsive" src="assets/images/menufixo-logo.png" alt="">

                    </div>
                </div>
                <div class="col-sm-4 ">
                    <div class="porduct-box">
                        <img class="img-responsive" src="assets/images/redes.png" alt="">

                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="porduct-box">
                        <img class="img-responsive" src="assets/images/menufixo-login.png" alt="product">

                    </div>
                </div>
            </div>
5
  • Como está a estrutura do seu HTML?
    – bfavaretto
    Commented 16/03/2017 às 22:17
  • está o basico, tudo dentro do container. Essa imagem q anexei não é html, apenas uma foto Commented 16/03/2017 às 22:22
  • Coloque o código que tens...
    – MagicHat
    Commented 16/03/2017 às 22:27
  • coloquei na pergunta Commented 16/03/2017 às 22:31
  • Bootstrap é um framework que é um excelente aliado da responsividade, atual necessidade da Web, para poder alcançar a todos os dispositivos inteligentes da atualidade. A responsividade baseia-se no sistema de grids. Colunas/blocos que se posicionam e mudam de forma de acordo com o tamanho da tela/container. Sugiro este artigo que pode ser útil. E é em Português. websocialdev.com/entendendo-o-sistema-de-grid-do-bootstrap Commented 19/03/2017 às 3:58

1 Resposta 1

1

Divida seu layout em grid, conforme a documentação do bootstrap sugere. Com isto em mente, Seu menu estará na 1ª linha (row) do grid, o box das redes sociais junto com o box de login na 2ª linha (row) do grid, divididos por 2 grids de 6 colunas cada (col-md-6).

Algo como:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive" src="assets/images/menufixo-logo.png" alt="">
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img class="img-responsive" src="assets/images/redes.png" alt="">
        </div>
        <div class="col-md-6">
            <img class="img-responsive" src="assets/images/menufixo-login.png" alt="product">

        </div>
    </div>
</div>

Lembrando de algumas regras:

  • Todo row deve estar dentro de 1 container.
  • Todo row deve possuir até 12 colunas.
  • Usar o col-md e col-lg para telas maiores e col-sm e col-xs para telas menores (smartphones ex.)

codepen.io/CompilaMente/pen/JWmNBV


Para criar o efeito de 3D, você pode adicionar CSS nos box das suas classes de product-box

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 .