Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''responsivo''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 60 registros

  1. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  2. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  3. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  4. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  5. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  6. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  7. Bruno Guimarães Bomfim

    Design Responsivo - Conteúdo da div fica desconfigurado

    Pessoal,Eu sou iniciante nesta área e criei um layout simples de site pra testar meus conhecimentos e tentar deixá-lo responsivo, porém estou preso a área do menu, que não consigo deixar responsivo.Estabeleci no CSS que quando a tela chegasse na largura máxima de 1050px, que a div do menu deveria reduzir para 808px. Isso até acontece, mas aí o conteúdo fica todo desconfigurado, sendo que eu atribuí a largura do conteúdo em porcentagem.Poderiam me ajudar? Esta é a imagem com o navegador maximizado: Esta é a imagem com a tela do nevegador reduzida: Código HTML <html> <head> <title>Projeto Clash</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="Clash.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="banner"> <img src="../../Imagens/Mais-banner.jpg" alt="Clash Royale"/> </div> <div class="bannermenu"> <div class="menutrans"> <div class="logo"> <img src="../../Imagens/Novo-logo.png" alt="Clash Royale"/> </div> <div class="listamenu"> <nav> <ul> <li>HOME</li> <li>CADASTRE-SE</li> <li>TORNEIO</li> <li>BATALHAS</li> <li>CONTATO</li> </ul> </nav> </div> <div class="search"> <form> Busca: <input type="search" placeholder="Encontrar na página"/> <input type="submit" value="Search"/> </form> </div> </div> </div> </body> </html> Código CSS body{ margin:0; padding:0; } *{ box-sizing:border-box; font-family:Comic Sans MS; } .banner{ height:200px; background-color:#99ff99; } .banner img{ position:relative; top:50%; left:50%; transform:translate(-50%,-50%); } .bannermenu{ height:80px; background-color:red; } .menutrans{ width:1050px; margin:auto; } .logo img{ float:left; padding-top:5px; height:80px; width:20%; } .listamenu{ color:white; font-size:14px; float:left; padding-left:5px; font-weight:bold; width:45%; height:80px; } .listamenu li, .listamenu ul{ margin:0; padding:0; list-style:none; } .listamenu li{ float:left; line-height:80px; padding-left:10px; padding-right:10px; } .listamenu li:hover{ color:black; cursor:pointer; } .listamenu li:active{ color:black; } .search{ float:left; padding-left:10px; color:white; font-size:14px; line-height:80px; font-weight:bold; width:35%; height:80px; } @media only screen and (max-width:1050px){ .menutrans{ width:808px; } } Muito obrigado!
  8. gilbertjuniors

    Design responsivo - Identificando Devices

    Pessoal, boa noite. Estou estudando sobre design responsivo e veio uma grande duvida: Temos TVs, (24 polegadas ou mais), notebooks (mais comumente 14 ou 15 polegadas), tablets (dentre varias telas temos 8 ej 10 polegadas) e celulares (geralmente 4,alguma coisa ou 5,alguma coisa em polegadas) Todos podem ter resoluções Full HD por exemplo mas com tamanho de telas muito diferentes (densidade de pixels por polegada diferetes) Então como um site que eu crio identifica o tamanho de tela e garante que fontes, imagens e botões fiquem acessíveis em todos os devices? Creio que identificar a resolução de tela não seja o suficiente, como fazer então?
  9. pattylpaz

    Problemas no Mobile

    Bom dia Pessoal tudo bem? Eu coloquei um código no meu site para inserir as bandeiras para traduzir para outros idiomas, no desk em ficou normal e deu certo, mas no mobile as bandeiras ficaram muito grandes. Vocês sabem o que faltou no código para me ajudar, por favor?
  10. JoaoVituBR

    Grid se organizar

    Olá, Gostaria de saber como eu poderia fazer para que o grid com uma linha que contem uma imagem maior posse comportar duas menores a sua frente! Exemplo de como está: <--AUMENTOU A DIV! Exemplo de como eu gostaria que ficasse: Codigo Usado: (Bootstrap)
  11. Pitag346

    Sites Responsivos

    Olá pessoal, tudo bem com vocês ??? Espero que sim... Estou um problema com meu site, tentei montar ele com responsividade, mas não obtive sucesso. Alguém que tenha bastante conhecimento nessa área teria um site de estudos/apostilas para indicar ? Obrigado.
  12. ELIZANDRO MARCELLINO

    WHILE OU FOR PHP

    $sql = mysqli_query($db, "SELECT * from areas"); $sql4 = mysqli_query($db, "SELECT MAX(ID_AREA) as maxarea FROM `areas`"); $i=0; echo "<div class='table-responsive'>"; echo "<table class='table'>"; echo "<thead>"; echo "<tr>"; echo "<th scope='col'>#</th>"; echo " <th scope='col'>ID_Area</th>"; echo " <th scope='col'>Area</th>"; echo " <th scope='col'>DatadeCadastro</th>"; echo " <th scope='col'>Comentario</th>"; echo "</tr>"; echo "</thead>"; /*BUSCA NA TABELA OS DADOS PARA CARREGAR O GRID USANDO UM LOOP PARA CADA LINHA DO SELECT*/ //Se tiverem enviado um valor, confere se ele é par ou impar while($exibe = mysqli_fetch_assoc($sql)){ $i = $exibe["ID_Area"]; echo "<tbody class='thead-light'>"; echo "<tr><td><input type='radio' name='radio' value='$i' </td>"; echo "<td>". $exibe["ID_Area"]."</td>"; echo "<td>". $exibe["Area"]."</td>"; echo "<td>". $exibe["DatadeCadastro"]."</td>"; echo "<td>". $exibe["Comentario"]."</td>"; echo "</tr>"; echo "</tbody>"; } Tenho o seguinte codigo acima em html/php que monta um grid puxando os dados do banco de dados, tudo funciona bem , porem queria uma função de PAGINAÇÃO NO GRID <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> Minha pergunta e como fazer o php primeiro Limitar a seleção do banco de dados de 5 em 5 por pagina, sem necessidade de criar outros links , gostaria que ele só atualiza-se o grid utilizando o nav para navegar entre as paginas, me utlizei de alguns loopins mais nada adiantou alguém tem alguma luz
  13. ment0r

    Criar responsivo pra um site já feito

    Bom dia a todos. Faz algum tempo que não publico nenhuma dúvida aqui no fórum e hoje preciso da ajuda de vocês. Bom, recentemente eu fiz um site e nesse final de semana o proprietário do site pediu pra que eu fizesse o responsivo do mesmo, só que eu nunca fiz site responsivo (nenhum cliente pediu antes), ou seja, não sei como se trabalha com as várias resoluções de celulares e tabletes. Tenho algumas dúvidas do tipo: Preciso desenvolver outro site - com as mesmas informações obviamente - pra ser acessado via tablet/smartphone? Como faço pra ajustar o site nas diversas resoluções de tablets/smartphones? Existe alguma função que identifica qual dispositivo está fazendo o acesso e encaminha para a pasta mobile, por exemplo? Existe alguma ferramenta que eu posso testar como vai ficar o site em diferentes dispositivos? O custo pra desenvolver o responsivo deve ser aproximado ao valor cobrado do site ou costuma-se não cobrar pelo responsivo? Acho que essas são as dúvidas primordiais pra eu iniciar esse trabalho. Se alguém puder respondê-las ou me indicar artigos que ajudem nessas dúvidas, eu agradeço muito. Muito obrigado a todos.
  14. ggbelgamo

    Como empurrar div com position absolute

    Estou com um problema na hora de deixa o site responsivo, preciso que quando o meu menu for clicado e a div header descer, as setas do slider que estão definidas com position absolute devem descer junto com o slider, não invadindo o espaço do menu. Se elas estivesse dentro do meu container slider funcionaria, porém estou utilizando o plugin jquery cycle e tudo que ponho dentro da container-slider se torna um elemento de slide. <div class="topoResponsive"> <div class="header"> <div class="container-logo"> <a href="index.php"><div class="logo"></div></a> </div> <div class="container-menu"> <img class="menuToogle" src="assets/img/menu-toogle.png" alt=""> <ul class="nav"> <li><a href="sobre-nos.php">Quem somos</a></li> <li><a href="pecas-agricolas.php">Peças agrícolas</a></li> <li><a href="pecas-inox.php">Peças Inox</a></li> <li class="mostrarMenu"><a href="contato.php">Contato</a></li> <li><a target="_blank" href="https://www.google.com.br/search?biw=1280&bih=566&tbm=nws&ei=AhK8WpKCAsiJwgSV3bPQBQ&q=agroneg%C3%B3cio&oq=agroneg%C3%B3cio&gs_l=psy-ab.3..0l10.3154.5498.0.5666.11.7.0.4.4.0.137.722.0j6.6.0....0...1c.1.64.psy-ab..1.10.737....0.HM95MZwK05g">Notícias</a></li> </ul> </div> </div> </div> <div class="slider"> <figure> <img src="assets/img/slide2.png" /> <figcaption> <p>Indústria e comércio de peças</p> <div class="btn-slider"><a href="pecas-inox.php">Clique e conheça</a></div> </figcaption> </figure> <figure> <img src="assets/img/slide1.png" /> <figcaption> <p>Solicite agora um orçamento!</p> <div class="btn-slider"><a href="contato.php">Entrar em contato</a></div> </figcaption> </figure> </div> <a class="arrowsSlider" id="prevSlider" href=""><img width="60px" src="assets/img/LeftArrow.png"/></a> <a class="arrowsSlider" id="nextSlider" href=""><img width="60px" src="assets/img/rightArrow.png"/></a> /* CONTAINER SLIDER */ .slider{ position: relative; height: auto; width: 100%; z-index: 1; margin: 0 auto; } .slider img { width: 100%; height: auto; } .arrowsSlider{ position: absolute; height: 100px; top: 50%; margin-top: -50px; z-index: 2; opacity: 0.5; transition: 0.5s; } .arrowsSlider:hover{ opacity: 1; } #nextSlider{ right: 0; } .slider figcaption{ position: absolute; text-align: center; color: #FFF; top: 50%; left: 50%; width: 400px; height: 150px; margin-left: -200px; margin-top: -75px; z-index: 2; } .slider figcaption p{ font-family: Myriad; font-size: 40px; font-weight: bold; } .btn-slider{ position: absolute; width: 210px; height: 40px; left: 50%; margin-left: -105px; border: 2px solid #FFF; transition: 0.5s; text-align: center; cursor: pointer; } .btn-slider a { font-family: Helvetica; font-weight: bold; color: #FFF; line-height: 40px; text-decoration: none; } .btn-slider:hover{ background: #FFF; } .btn-slider:hover a{ color: #4F4F4F; } PRINT DO PROBLEMA: https://imgur.com/a/FuYLB
  15. Olá, bom dia! As imagens do meu site ficam corretas, nas proporções definidas, quando testo localmente (inspecionado a página no navegador) , porém quando fiz um teste no servidor online e verifiquei em outros monitores "reais" as imagens ficam maiores que o tamanho máximo definido (e elas aumentam desproporcionalmente), em algumas resoluções. Por exemplo: eu testei em monitores 17 e 19 polegadas (ambos com a resolução padrão 1024 X 768 px, tbm testei outras resoluções nessa telas) e as imagens ficaram "esticadas" horizontalmente e achatadas verticalmente, mas nessa mesma resolução, no computador onde fiz essas páginas (com resolução padrão de 1366 X768 px tela de 15"), as imagens ficam corretas (simulando uma tela na resolução de 1024X768px). Em telas menores que 15" esta tudo certo tbm. Defini um tamanho máximo para as imagens, porém quando em telas maiores elas aumentam muito e desproporcionalmente (mesmo com resolução que já esta definida no css) : img{ width:100%; height:auto !important; max-width:400px; max-height:300px; } @media screen and (max-width: 1024px){ .img_textos{ width:100%; max-width:300px; } Teria alguma forma, de quando o site, chegar a resolução máxima definida (1366X768 px) as imagens e o site em geral não aumentar além do estabelecido para essa resolução (sendo esse o limite máximo)? Obrigada!
  16. Artes Ussler

    Posicionamento de Div's

    Olá Preciso de uma ajudinha para resolver uma questão de posicionamento de divs. Fiz umas imagens para ajudar a explicar. Nesta primeira aparecem as divs em seus locais padrões com a janela do navegador totalmente maximizada: Minha intenção agora é que a Div4 fique entre a div2 e div3 quando a tela for reduzida (um tablet, por exemplo), ficando assim: Será que alguém pode me ajudar a montar o css para isso? Ficarei grato por qualquer dica.
  17. giovannaalves

    Problemas no responsivo

    Um cliente pediu pra eu deixar o site dele responsivo, o site tá todo bagunçado, todo mal feito e esquisito, porém, fiz algumas coisas para deixar responsivo. O responsivo funciona bem quando diminuo a tela do navegador, mas quando testo no inspecionar ou no celular, ele simplesmente não funciona. Alguém me ajudaaaa
  18. MateusFreitas01

    Orientação Landscape com Bootstrap

    Poderiam me dizer se existe alguma forma de fazer a orientação em landscape utilizar as classes do padrão sm do Bootstrap ao invés de xs? Obrigado.
  19. meu site no Google Chrome fica normal, mas no firefox ele quebra
  20. nalisb

    Alinhar fotos com li (bootstrap3)

    Coloco 3 imagens com links no inicio do site, coloquei pra ser responsivo, mas quando diminuo a tela ela fica toda bugada, as imagens acabam ficando uma por cima da outra. E preciso que as imagens fiquem no centro da tela, uma do lado da outra, e quando a tela diminuir elas simplesmente continuem uma do lado da outra. <div class="row"> <div class="col-xs-4 col-md-4 col-sm-4"> <ul> <li class="lipostagem"><a href="PostagemTeste.html"><img class="img2 img-responsive" src="img/azul/teste.png" alt="Sucesso"> <span class="post">Postagem</span></a></li> </ul> </div> <div class="col-xs-4 col-md-4 col-sm-4"> <ul> <li class="liviagem"><a href="#"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="viagem">Viagem</span></a></li> </ul> </div> <div class="col-xs-4 col-md-4 col-sm-4"> <ul> <li class="lientregue"><a href="EntregueCerto.html"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="entregue">Entregue</span></a></li> </ul> </div> </div> CSS: .img1{ float: right; } .img2{ float: none; } .img3{ float: right; } .flex-centralizado { display: flex; justify-content: center; } li{ list-style-type: none; }
  21. Fernando_Henrique

    Página de redirecionamento não responsiva

    Boa tarde amigos, estou tentando fazer uma página html para que ao ser acessada redirecione para outra página, mas mantenha a url dela. Para isso usei um frame. Bom, de começo funcionou legal, porém ao testar no navegador do celular a página deixa de ficar responsiva, nisso acredito que seja por conta do frame. Deixo abaixo o código usado para que possam me ajudar. Desde já. Agradeço. <frameset rows="0,*" border="0"> <frame name="header" scrolling="no" noresize target="main"> <frame name="main" src="http://meusite.com.br/"> <noframes> <body> </body> </noframes> </frameset>
  22. aliluc

    thumbnail com tamanhos diferentes e responsivo

    Estou com muita dificuldade em deixar todas as thumbnail do index com o mesmo tamanho e responsivas. Encontrei o BFI_Thumb.php e ele funciona perfeitamente porém não deixa as imagens responsivas. ps: sou nova em PHP/HTML/Css.
  23. do_morro

    Ajustar duas DIVs

    Bom dia, Sou novo por aqui. Inicialmente gostaria de parabenizar pelo trabalho desse forum. Estou criando um site que tem dois problemas básicos. O primeiro é que o logotipo à esquerda precisa diminuir de tamanho quando o site for aberto em um celular, pois senão o logo fica em cima do banner. E o segundo é que no desktop o banner não fica alinhado com a div de baixo. Se mexo em um não fica bom no outro. Estou tentando inserir regras para o css ficar responsivo mas parece que não obedece. O site é o http://www.credifree.com.br/teste4/index.html Alguém pode me dar uma luz? Obrigado Paulo
  24. gmarciotti

    Site responsivo

    Estou com dificuldade em relação à responsividade do meu site, os itens não se alinham a telas diferentes de meu monitor, queria saber se vocês conseguem me ajudar quanto à isso, como posso fazer com que todos conteúdos sejam reduzidos ou ampliados de acordo com o monitor? Tenho também um modelo para quando o site é minimizado, queria saber qual o efeito usado neste site (https://www.supercomborock.com/) quando a tela é minimizada, é como se o site realizasse apenas um corte na págna, não um redimensionamento, ele apenas vai cortando o conteúdo deixando tudo fixo. Agradeço desde já!!
  25. gleisonlima

    Banners responsivo

    Olá, boa noite! Criei um mosaico com banners em um site que administro e gostaria de uma ajuda para deixar esse mosaico responsivo! Segue os códigos abaixo: ============================ HTML ============================ <div class="banners-categoria"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6 bloco1"> <div class="box-banner"> <a href="https://www.bebecheiroso.com.br/meninas"><img width="280" height="360" alt="Mosaico - Puket" src="{{ themePath }}img/banners/box-mosaico-01.jpg?{{ utils.assets_version }}"></a> </div> <div class="box-banner"> <a href="https://www.bebecheiroso.com.br/bebes/calcados"><img width="275" height="175" alt="Mosaico - Quinny" src="{{ themePath }}img/banners/box-mosaico-02.jpg?{{ utils.assets_version }}"></a> </div> <div class="box-banner"> <a href="https://www.bebecheiroso.com.br/meninos/camisas"><img width="275" height="175" alt="Mosaico - Pingo Lele" src="{{ themePath }}img/banners/box-mosaico-03.jpg?{{ utils.assets_version }}"></a> </div> </div> <div class="col-xs-12 col-md-6 bloco2"> <div class="box-banner"> <a href="https://www.bebecheiroso.com.br/loja/busca.php?palavra_busca=body"><img width="565" height="360" alt="Mosaico - Masterbag" src="{{ themePath }}img/banners/box-mosaico-04.jpg?{{ utils.assets_version }}"></a> </div> </div> <div class="col-xs-12 col-md-6 bloco3"> <div class="box-banner"> <a href="https://www.bebecheiroso.com.br/brandili-mundi"><img width="565" height="360" alt="Mosaico - Blooming Bath" src="{{ themePath }}img/banners/box-mosaico-05.jpg?{{ utils.assets_version }}"></a> </div> </div> <div class="col-xs-12 col-md-6 bloco4"> <div class="row"> <div class="col-xs-6"> <div class="box-banner"> <a href="#"><img width="275" height="175" alt="Mosaico - Petit" src="{{ themePath }}img/banners/box-mosaico-06.jpg?{{ utils.assets_version }}"></a> </div> <div class="box-banner"> <a href="#"><img width="275" height="175" alt="Mosaico - Lequiqui" src="{{ themePath }}img/banners/box-mosaico-07.jpg?{{ utils.assets_version }}"></a> </div> </div> <div class="col-xs-6"> <div class="box-banner"> <a href="https://www.bebecheiroso.com.br/meninos"><img width="280" height="360" alt="Mosaico - Mini Sailor" src="{{ themePath }}img/banners/box-mosaico-08.jpg?{{ utils.assets_version }}"></a> </div> </div> </div> </div> </div> </div> </div> ============================ CSS ============================ /* --- CSS BOX BANNERS OFERTAS --- */ .banners-categoria { padding-top: 20px; padding-bottom: 20px; } .banners-categoria .bloco1 { margin-bottom: 10px; } .banners-categoria .bloco2 { margin-bottom: 10px; } .banners-categoria .bloco3 { margin-bottom: 10px; } .banners-categoria .bloco4 { margin-bottom: 10px; } @media (min-width: 992px) { .banners-categoria .bloco1 { padding-right: 5px; } .banners-categoria .bloco2 { padding-left: 5px; } .banners-categoria .bloco3 { padding-right: 5px; } .banners-categoria .bloco4 { padding-left: 5px; } } .banners-categoria .bloco1 .box-banner { float: left; } .banners-categoria .bloco1 .box-banner:nth-child(1) { margin-right: 10px; } .banners-categoria .bloco1 .box-banner:nth-child(2) { margin-bottom: 10px; } .banners-categoria .bloco4 .col-xs-6:nth-child(1) { padding-right: 7px; } .banners-categoria .bloco4 .col-xs-6:nth-child(1) .box-banner:nth-child(1) { margin-bottom: 10px; } .banners-categoria .bloco4 .col-xs-6:nth-child(2) { padding-left: 3px; } .banners-categoria .box-banner { overflow: hidden; } .banners-categoria .box-banner a img { transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; } .banners-categoria .box-banner a img:hover { transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); } @media only screen and (max-width: 767px){ /*---------------------------------*/ .banners-categoria { display: none; } } ================================================================== Acessando o link abaixo, podem ver como ficou o mosaico com banners: https://www.bebecheiroso.com.br/loja/loja.php?loja=470273&opencode_theme=592cd30159248&5063 Grato pela atenção e ajuda desde já.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.