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 Web
    • Desenvolvimento frontend
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets e outros ambientes
    • Desenvolvimento com Wordpress
    • Desenvolvimento de apps
    • Desenvolvimento ágil
    • Desenvolvimento de Games
    • Banco de Dados
    • Design e UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • Boteco iMasters

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 10 registros

  1. Estou procurando um programador web para desenvolver um site front responsivo, de preferência pessoas com referências e trabalhos já feitos. Contato via discord: quando eu tinha uma glock#5547
  2. Boa noite comunidade da Imasters, como vocês estão? Pessoal peguei um botão responsivo com popup, mas não consigo adicionar mais dele um do lado do outro. Vou deixar o conteúdo dele aqui se alguém puder me dar uma luz. Só queria copiar ele para adicionar mais dois botões um ao lado do outro. Quem puder me ajudar, ficaria agradecido. segue código: index.html: <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Alterações Robô Everest</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <h1> Configurações Robô Everest </h1> <h2> Data: 14/04/2021</h2> <button type="button" class="main-btn-rect popup-btn" data-popup="popup-reg">Modo Agressivo</button> <div id="popup-reg" class="popup"> <div class="popup-content"> <div class="event-header"> <h6>Don't be shy, say hi!</h6> </div> Stop Loss: 255<br> Stop Gain: 30<br><br> Ou a seu gosto!<br><br> Desvio Envelope: 0.12<br><br> Pausas nas operações: 10:00,11:00,10:30,12:30<br> <span class="fade-out main-btn-circle">╳</span> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html> script.js: $(document).ready(function(){ $('.popup-btn').click(function(){ var popupBlock = $('#'+$(this).data('popup')); popupBlock.addClass('active') .find('.fade-out').click(function(){ popupBlock.css('opacity','0').find('.popup-content').css('margin-top','350px'); setTimeout(function(){ $('.popup').removeClass('active'); popupBlock.css('opacity','').find('.popup-content').css('margin-top',''); }, 600); }); }); }); style.css: @import url('https://fonts.googleapis.com/css?family=Lobster'); @import url('https://fonts.googleapis.com/css?family=Roboto'); body{ margin: 0; padding: 0; height: 100vh; font-family: 'RobotoLight', sans-serif; border-bottom: 1px solid #FFFFF0; background: #00c6ff; background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); background: linear-gradient(to right, #0072ff, #00c6ff); overflow: hidden; } button { text-decoration: none; border: none; } h1 { position: absolute; display: inline-table; top: 20%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: #FFFFF0; } h2 { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; text-align: center; color: #FFFFF0; } .popup-btn{ position: absolute!important; top: 55%; left: 50%; transform: translate(-50%,-50%); } .main-btn-rect, .main-btn-circle{ position: relative; margin: 0; font-family: 'Roboto', sans-serif; color: #FFFFF0; background-color: rgb(252, 79, 79); text-transform: uppercase; font-size: 25px; letter-spacing: 1px; outline: none; cursor: pointer; z-index: 100; } .main-btn-rect { padding: 10px 80px; line-height: 30px; } .main-btn-rect:before, .main-btn-rect:after{ position: absolute; content: ''; top:0; width: 0%; height: 100%; background-color: rgba(255, 255, 240, 0.2); -webkit-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .main-btn-rect:before { left: 0; } .main-btn-rect:after { right: 0; } .main-btn-rect:hover:before, .main-btn-rect:hover:after{ width: 50%; } .main-btn-circle{ height: 40px; width: 40px; -webkit-border-radius: 50%; border-radius: 100%; line-height: 40px; -webkit-transition: box-shadow 0.3s; -o-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .main-btn-circle:hover{ -webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); } .popup{ position: fixed; top: 100%; width: 100%; height: 100%; z-index: 10001; } .popup.active{ top:0; background-color: rgba(3, 3, 3, 0.98); transition: background-color .6s ,opacity .6s; } .popup .main-btn-rect{ padding: 10px 100px; } .popup .popup-content{ position: absolute; top: 50%; left: 50%; max-height: 568px; min-width: 320px; margin-top: 150px; padding: 25px; background-color: #FFFFF0; color: #070000; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transition: margin .6s; -webkit-transition: margin .6s; -moz-transition: margin .6s; -o-transition: margin .6s; } .popup.active .popup-content{ margin-top: 0px; } .popup-content h6{ display: table; font-size: 16px; text-align: center; margin: 10px auto; font-family: 'Roboto',sans-serif; text-transform: uppercase; font-weight: 100; } .form-group{ position: relative; width: 90%; margin: 0px auto; } form#send input, form#send textarea{ position: relative; margin-bottom: 32px; width: 100%; height: 29px; font-family: 'RobotoLight', sans-serif; text-indent: 20px; background-color: transparent; outline: 0; border: none; border-bottom: 1px solid #070000; -webkit-transition: border 0.6s; -o-transition: border 0.6s; transition: border 0.6s; } form#send input:focus, form#send textarea:focus{ border-bottom: 1px solid rgb(63, 173, 168); } form#send label{ position: absolute; top: 0; line-height: 28px; -webkit-transition: color .5s; -o-transition: color .5s; transition: color .5s; } form#send input:focus + label, form#send textarea:focus + label{ color: rgb(63, 173, 168); } form#send .txt{ line-height: 22px; left: 2px; } form#send .main-btn-rect { position: relative; display: block; padding: 12px 80px; margin: 0px auto; font-size: 14px; } form#send .main-btn-rect i { margin-right: 5px; } .popup .fade-out{ position: absolute; top: -20px; right: -20px; text-align: center; font-size: 15px; } .share-wrap{ position: absolute; display: inline-table; top: 67%; left: 50%; transform: translate(-50%, -50%); padding: 15px; text-align: center; } .share-btn{ color: #FFFFF0; padding: 7px 25px; text-decoration: none; cursor: pointer; font-weight: 100; font-size: 14px; font-family:'Lobster', sans-serif; background-color: rgba(63, 173, 168, .8); text-transform: uppercase; border-radius: 5px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .share-btn:hover{ color: #FFFFF0; text-decoration: none; background-color: rgba(63, 173, 168, 1.0); } .resp-sharing-button__link, .resp-sharing-button__icon { display: inline-block } .resp-sharing-button__link { text-decoration: none; color: #fff; margin: 2px; } .resp-sharing-button { border-radius: 5px; transition: 25ms ease-out; padding: 6px 9px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .resp-sharing-button__icon svg { width: 1em; height: 1em; margin-right: 0.4em; vertical-align: top } .resp-sharing-button--small svg { margin: 0; vertical-align: middle } .resp-sharing-button__icon, .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle { fill: #fff; stroke: none } .resp-sharing-button--facebook { background-color: #3b5998; border-color: #3b5998; } .resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active { background-color: #2d4373; border-color: #2d4373; } .resp-sharing-button--twitter { background-color: #55acee; border-color: #55acee; } .resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active { background-color: #2795e9; border-color: #2795e9; } .resp-sharing-button--linkedin { background-color: #0077b5; border-color: #0077b5; } .resp-sharing-button--linkedin:hover, .resp-sharing-button--linkedin:active { background-color: #046293; border-color: #046293; } @media only screen and (max-width: 768px){ h1 {font-size: 25px;} h2 {font-size: 14px;} form#send .main-btn-rect {padding: 7px 60px; font-size: 14px;} .popup-btn{padding: 7px 60px; font-size: 14px;} } Tentei copiar o código do index.html mas não aparece os outros botões. Puderem me ajudar agradeço. Um abraço.
  3. Olá, estou com uma dificuldade para posicionar um elemento. Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução. No momento estou usando o position absolute, a div é essa abaixo: .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei: {position: relative; top: 50%; left: 50%;} Alguém pode me ajudar? Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?
  4. Sherlock02

    Posts em grid

    Olá! Eu estou tentando fazer um layout de postagem em que o primeiro ocupa a largura de 100%. Os demais são dispostos em grid, dois posts. (Vou anexar uma imagem para exemplificar o que desejo). Segue o código: .post:first-child{width:100%;position:relative;} .post{margin-bottom:60px;width:48.8%;float:left;background:#eee} .post:nth-child(2n+2){margin-right:30px;} <div id='mainwrapper'> <div class="post"> <div class="post-entry"> 1 Post com width 100%. Here goes my post. </div> </div> <div class="post"> <div class="post-entry"> 2. Post com width 48%. Here goes my post. </div> </div> <div class="post"> <div class="post-entry"> 3. Post com width 48%. Here goes my post. </div> </div> </div><!-- mainwrapper--> Esse código que fiz não me satisfez por completo porque o post da direita não "gruda" no canto, então está ficando desigual o primeiro e os demais. Eu gostaria de saber se não existe uma forma mais prática de fazer esse código. Obrigada!
  5. Olá! Bom dia! Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva) Teria alguma forma de corrigir isso? O codigo esta assim: <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div> O CSS: .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;} Obrigada
  6. guirufino

    tentando criar site responsivel

    Site:http://platformwar.epizy.com Estou tentando fazer um site responsivo, mas estou tendo problemas com o (height:) o height: da galeira nao quer funcionar com a " % " não funciona, ja procurei de tudo na net e nao achei resposta. Eu peguei o código da galeira na internet, e comecei a modificar... só que tem esse código: Ta no Hmtl: <script> $('#games').coinslider({ width : "100%" , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ; </script> Aqui to tentando colocar 50% mais não funciona... eu queria que ele diminui-se confirme diminui a tela. (não sei nada de javascript). Se precisarem de algum Código eu mando CSS: #games {position: relative; margin-top: 70px; z-index: 0; margin-left: auto; margin-right: auto; } .coin-slider {float: none; top:50%; left:50%; text-align: center; } .coin-slider { overflow: hidden; zoom: 0; position: static; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons {font-size: 0%; padding: 1%; float: left; position: relative; } .cs-buttons a {margin-left:5px; background:url(../cores-roleta/contadorcompleto.png); height: 29px; width: 29px; float: left; text-indent: -1000px;} .cs-active { background:url(../cores-roleta/contador10.png); height: 29px; width: 29px; float: left; } .cs-title { width: 100%; padding: 2%; background-color:#000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: Transparent; color: #000; padding: 0px 10px; }
  7. Boa noite, eu tenho um site em betheme e queria saber se é possível remover a responsividade apenas de uma página. Eu tenho uma pagina com o valor dos serviços porem são 3 colunas e quando abre no celular fica totalmente desorganizado e não da para entender referente a que se trata os valores. Alguem consegue me ajudar nisso? Link da página: https://azuresolutions.com.br/tabela-de-precos/
  8. Ewfc2005

    Transformar site em responsivo

    Eu sou um programador amador, e ainda estou aprendendo programação, comecei um site, mas esqueci de faze-lo para ser responsivo, agora preciso de ajuda pois nao consigo deixa-lo responsivo Codigo HTML Codigo CSS Ele está mal feito, ainda tenho que arrumar muita coisa, se alguem conseguir me ajudar e dizer como ele pode ficar responsivo eu Agradeço.
  9. Meu site WordPress não está responsivo no celular, e não consigo resolver esse erro. Alguém pode me ajudar? http://moveiscomplemento.com/categoria-produto/beleza-e-saude/
  10. laedsonfln

    3 colunas no celular woocommerce

    Pessoal, boa noite! Gostaria de mostrar 3 colunas e 6 produtos no celular utilizando o shortcode do woocommerce na página principal. Criei um site de Brechó pra minha namorada usando o Wordpress + woocommerce. Tentei usar os shortcodes do woocommerce para chamar os produtos pra página principal. Até aqui tudo bem, porém quando acesso o site pelo celular a loja mostra duas colunas mesmo eu utilizando [products limit="6" columns="3"]. Procurei bastante nas internet e o que eu consegui foi copiar o HTML usando o inspector do google e inserindo num bloco do Elementor (construtor de página que uso) e mudando algumas coisinhas no código. A primeira vista está funcionando mas quando acrescento um produto ele não atualiza no celular porque não é um shortcode. Alguém pode me ajudar? Sou iniciante na programação. Segue o site: www.brechodaelyevariedades.com.br Obrigado!
×

Informação importante

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