Perguntas com a tag [layout-responsivo]
Layout Responsivo é uma abordagem utilizada para desenvolver interfaces do usuário, proporcionando ótima experiência de visualização, fácil leitura, navegação e adaptabilidade a uma ampla gama de dispositivos (de monitores de computador a telefones celulares).
241
perguntas
-3
votos
0
respostas
10
visitas
Como deixar uma div que recebe dados de uma API de forma fixa na tela
inserir a descrição da imagem aqui
Recebo dentro de uma div os resultados de albums para determinada pesquisa. Gostaria que os resultados fossem exibidos somente no limite de tela(Deixei uma imagem ...
-1
votos
1
resposta
101
visitas
Tirar tag do html pelo css na responsividade [duplicada]
To querendo tirar a tag <br> do html pelo css para responsividade
HTML:
<div class="chamada1">
<h2>Sistemas Próprios Para <br> Empresas Autênticas</...
-1
votos
1
resposta
57
visitas
Imagem sobreposta e responsiva
estou ainda na fase inicial de Web Design e tenho a seguinte dúvida: Eu devo sobrepor a imagem 1 exatamente no espaço "em branco" da imagem 2. Porém ambas devem ser responsivas. Tentei o ...
0
votos
0
respostas
36
visitas
CSS função checked não funciona
Estou tentando fazer um menu dropdown responsivo, mas na hora do :checked, ele simplesmente n funciona. Algém sabe o que poderia ser?
HTML
<nav>
<label class="title"><a ...
-3
votos
0
respostas
23
visitas
media queries only work on devtools but not on devices [fechada]
I made a project with simple html and css and added some media queries.(my resolution is 1980x1080)
It turns out that when I set for example 1366x768 (which is a common resolution for notebooks) in ...
0
votos
1
resposta
34
visitas
Por que meu hooks personalizado retorna undefined ReactJS NextJS?
Foi criado um viewportContext que envolve todo o App, assim posso capturar o tamanho da tela.
import { createContext, useEffect, useState } from "react";
const viewportContext = ...
0
votos
1
resposta
42
visitas
Como desligar um evento em JS com responsividade?
Estou tendo problemas para deixar meu site responsivo. Ao usuário passar o mouse em cima do cabeçalho em PCs, o cabeçalho deve mudar de cor. Mas queria desabilitar esse evento em dispositivos móveis.
...
-2
votos
1
resposta
60
visitas
container não respeita o min-height
Estou fazendo um programa apenas para treinar meus conhecimentos (nível iniciante) para mostrar na tela números impares, pares ou ambos conforme o numero informado no input, porém se o usuário ...
0
votos
1
resposta
110
visitas
Layout responsivel com imagem
Eu tenho uma área com um titulo, texto , lista e imagem.
Preciso deixar a imagem ao lado da área de texto, como na figura abaixo:
Porém, ao diminuir a resolução da tela eu preciso que a imagem fique ...
0
votos
2
respostas
81
visitas
Por que não consigo inverter de lado meu aside e section:
Estou tentando fazer a box2 ficar com float:left e a box1 com float:right mas mesmo setando as opções o HTML não reproduz o que preciso. Isso precisa acontecer sem usar grid ou flexbox ou qualquer ...
-1
votos
1
resposta
98
visitas
Meu site é feito de imagens animadas com javascript. Como torna-lo responsivo?
Antes de tudo: comecei a programar não faz nem uma semana, estou bem interessado a aprender, então enquanto espero a resposta vou estar me esforçando pra me virar, mas, uma ajuda não seria nada mal :)
...
-3
votos
1
resposta
118
visitas
Como manter todo o html dentro de uma div height 100%?
Olá ^^ Como faço para manter meu html dentro da imagem de fundo sem criar aquele fundo branco e de forma que as divs - amarela e preta - também respeitem os 50% de altura dentro dessa altura da imagem ...
-1
votos
1
resposta
234
visitas
Como deixar minha lista dentro do card com tamanho responsivo!
Gostaria de deixar o conteúdo em destaque dentro do card e não sair para fora, pois quando se deixa a tela pequena eles acabam saindo.
Fiz meu site utilizando flexbox como base.
body {
...
1
voto
0
respostas
28
visitas
Corrigir CLS em imagens dinâmicas
Um dos principais problemas enfrentados no Lighthouse do Google é a questão do CLS. Nos meus clientes isso é algo que acontece com muita frequência.
Sei que para corrigir o CLS a melhor alternativa é ...
1
voto
1
resposta
40
visitas
background-size: cover. Existe alguma forma de acrescentar um valor em porcentagem?
Quero adicionar um hover event que aumente ligeiramente o tamanho da imagem que estou usando de background, porém pra mantê-lo responsivo preciso do background-size:cover.
segue um trecho do código ...
0
votos
1
resposta
344
visitas
Problemas com responsividade HTML/CSS
sou iniciante e estou me aventurando no mundo de desenvolvimento Web. Estou tendo problemas para aplicar responsividade nas páginas, sempre fica ~sobrando~ espaço no body (aparece uma barra de rolagem ...
-4
votos
2
respostas
991
visitas
Como faço para transformar um site que já está pronto em responsivo? Nos dois códigos abaixo é apenas uma página do site para tomar como exemplo
* {
margin: 0;
padding: 0;
}
body {
background-image: url("imagens/imgfundo.jpg");
background-attachment: fixed;
width: 100%;
}
header {
width: 100%;
background-color: ...
-2
votos
1
resposta
306
visitas
Como alterar disposição dos Radio Buttons no layout responsivo com Bootstrap ou outra ferramenta?
Atualmente quando o site fica em modo mobile/reduzido a uma certa resolução os Radio Buttons automaticamente se posicionam da seguinte forma:
Gostaria que ficasse algo parecido com isso:
Parte do ...
1
voto
1
resposta
1mil
visitas
Tabela responsiva com scroll caso tela seja menor que os dados
estou tendo dificuldades em um certo ponto responsivo do site que estou criando. Preciso de um norte.
Nessa imagem o menu lateral está fechado, ocupando menos espaço. Como minha div possui tamanho ...
-1
votos
1
resposta
142
visitas
Layout responsivo/liquido
Estou criando um site com layout responsivo/liquido, mas quando diminuo O Navegador a barra de menu fica vazando para a diteira (fica estático) segue o print:
gostaria de saber como esconder esse ...
1
voto
0
respostas
467
visitas
Utilizar muito ul/li na nav do bootstrap ou utilizar links e estilizar no css?
Estou recriando um menu com bootstrap 4.5 para melhor aprendizado e fiquei com uma dúvida.
Eu tenho a seguinte nav de exemplo.
A proposta é recriar esse menu de maneira responsiva com componentes do ...
-1
votos
1
resposta
5mil
visitas
Como deixar um componente ocupar 100% da altura restante
Estou tentando fazer com que esse retângulo rosa ocupe o restante da tela, mais especificamente... height responsivo, tentei algumas formas, porém sem êxito. Como proceder?
OBS: estou utilizando o ...
-1
votos
1
resposta
839
visitas
Como tiro esse Scroll da tela e deixo responsiva?
Pessoal como faço para tirar esse Scroll que aparece quando abro essa página em telas menores?
Gostaria de deixá-la responsiva tbem e com o card de login no meio da página com margin top e bottom ...
0
votos
1
resposta
21
visitas
Menu Responsivo - Quando a página está no seu tamanho normal, a lista do menu não fica inline (deveria ficar um ao lado do outro)
Vocês podem observar o código no codepen. Não consigo deixar, quando a página está em seu tamanho normal, o menu com as opções inline-block, mesmo que isso esteja no código. Ele continua se ...
-1
votos
1
resposta
647
visitas
Button responsivo dispositivo mobile
Como poderia fazer com esse button se ajeita quando e para dispositivo mobile?
Quando é para PC ele fica certo.
Este é o codigo.
<div id="carouselExampleControls" class="carousel slide" data-...
0
votos
1
resposta
2mil
visitas
Ocultar div no mobile
gostaria de uma ajuda se possível para esconder uma div no mobile.
Tentei usar
<div class="hidden-xs">
Elemento oculto para mobile
</div>
<div class="visible-xs">
Elemento ...
1
voto
1
resposta
33
visitas
E-mail responsivo [fechada]
Compramos um template de e-mail responsivo, ele ficou 100% responsivo, porém nos apps de e-mail como o do gmail o footer some, a surge um click de "ver toda a mensagem" quebrando a rolagem e abre na ...
1
voto
0
respostas
71
visitas
Como usar diferentes imagens no background-image, de acordo com tamanho da tela? [fechada]
Estou otimizando um site e queria saber se tem como eu usar background-image diferente de acordo com o tamanho da tela.
Por exemplo, telas com largura superiores à 640px usar a imagem /referencia123/...
0
votos
0
respostas
65
visitas
Duvidas de responsividade
Estou com um problema e preciso de ajuda
Tenho uma área no site em que tem o que a empresa faz,no caso não é esse da imagem, é só um exemplo que tenho.
No caso da imagem um temos
Imagem + Texto
...
0
votos
1
resposta
1mil
visitas
Bootstrap 3 - Grid de imagens
Olá!
Como posso fazer uma grid responsiva de imagens com a versão Bootstrap 3.5 que fique assim no Desktop:
E que no Mobile fique assim:
Meu código é esse:
<div class="row bloco02">
...
2
votos
1
resposta
473
visitas
Qual o problema dessa paginação não responsiva usando boostrap 4 no Laravel?
Estou utilizando Laravel para fazer um sistema, junto com o framework Bootstrap. E estou utilizando o recurso de paginação. Porém estou com problemas para deixar responsivo os numeros da paginação. ...
-1
votos
1
resposta
881
visitas
Redimensionar DIV de acordo com tamanho do menu
Coloquei o código html + css dentro de um JSFiddle para ajudar na visualização do problema.
O que eu preciso fazer é que a div com nome de "kk" se redimensione de acordo com o tamanho do menu, por ex:...
0
votos
1
resposta
43
visitas
Problemas com responsividade no bootstrap para telas sm e xs
Amigos devs, minha tela não fica responsiva para dispositivos pequenos e extra pequenos (sm e xs), aparece uma barra lateral branca do lado direto da tela e que a medida em que a tela diminui mais, ...
0
votos
2
respostas
8mil
visitas
Posicionamento em colunas no flutter
Eu tenho o seguinte código no flutter:
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class ...
0
votos
1
resposta
47
visitas
Com ConstraintLayout não se usa mais match_parent?
Com o recurso de ConstraintLayout não se usa mais match_parent?
2
votos
1
resposta
107
visitas
Display:none em Modal e @media afeta SEO
Estou tentando aplicar a responsividade em um site, porém alguns menus de categorias eu transfiro para dentro de uma modal do bootstrap que utiliza o display:none, além de estar fazendo com que alguns ...
0
votos
1
resposta
350
visitas
Tabela Responsiva mantendo largura e altura das céluas
Como posso melhorar essa formatação de forma que essa tabela seja bem representado em uma tela de celular? É possível ajustar o código de forma que caso a largura da página seja diminuída, sejam ...
0
votos
1
resposta
2mil
visitas
Mobile Keyboard quebrando layout
Testando no mobile a responsividade do meu layout, reparei que ao clicar em um elemento HTML de entradas de dados (I), como por exemplo no meu caso o <input>, abre-se o keyboard do dispositivo (...
-3
votos
1
resposta
120
visitas
Responsividade do bootstrap em telas grandes [fechada]
Estou criando um site em bootstrap4 e ele está quebrando/ficando estranho em telas com mais de 1300px.
Esse é o comportamento padrão do bs nesses casos?
O que posso fazer para que o layout fique ...
0
votos
0
respostas
344
visitas
NavBar Bootstrap abrindo errado link em pontos do site
no meu site tenho um menu que adiciono com header.php em determinadas partes do site, home e seus links simbolicos. o problema esta quando passa do menu horizontal para aquele botão que se abre ...
0
votos
1
resposta
115
visitas
Layout diferente em janela anonima e outros navegadores [fechada]
Estou desenvolvendo um site simples com html,css, caso seja necessario eu coloco o código posteriormente.
mas a questão seria estou usando grids com row e col do bootstrap, quando abro do chrome ...
0
votos
0
respostas
28
visitas
Como definir uma largura mínima para um layout com comportamento responsivo? [duplicada]
Estou trabalhando num layout HTML "responsivo" cujos elementos internos se ajustam à largura da tela para desktop e dispositivos mobile. No entanto, não consigo estruturar meu layout de maneira ...
1
voto
1
resposta
219
visitas
Como fazer sliders criados com bootstrap, ficarem responsivos em todos tamanhos de tela?
O banner do meu site esta rodando bem em monitor de até 15 polegadas.
De resoluções acima destas os banners ficam muito grandes e geram barra horizontal no site.
Como na imagem a seguir:
[![https://i....
-4
votos
1
resposta
101
visitas
Minha página não fica responsiva em grandes resoluções [fechada]
Em grandes resoluções de tela aparece a barra de rolagem horizontal na página. Estou usando toda a largura da minha tela conforme código abaixo:
.slides {
width: 100vw;
}
Segue o exemplo:
...
1
voto
1
resposta
4mil
visitas
Selecionar todos os Filhos, exceto o Primeiro com o css
<div class="main">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
...
0
votos
1
resposta
21
visitas
Existe alguma ferramenta para site fluido
alguém conhece alguma ferramenta que mostre o tamanho da tela? por exemplo conforme vou diminuindo o tamanho do navegador ela me mostre o tamanho da tela em px tinha uma no github mais acabei perdendo
1
voto
1
resposta
38
visitas
Problemas com redimensionamento de site
Boa tarde!
Gostaria da ajuda de vocês com um projeto de site pessoal meu, estou enfrentando um ou dois problemas com ele, mas vamos pelo inicio.
Primeiro: Quando eu redimensiono o site para valores ...
1
voto
1
resposta
722
visitas
Propriedade col-xs não funciona
Estou desenvolvendo um website utilizando Bootstrap e HTML, cujo vou deixá-lo flexível para a plataforma desktop e mobile. Porém, não consigo entender o porque da propriedade col-xs(phones) não ...
1
voto
2
respostas
2mil
visitas
Problema com media queries do CSS
Estou tentando fazer minha aplicação rodar em smartphones, além do padrão desktop. Mas não consigo fazer as media queries funcionarem de forma correta.
Só está funcionando até o tamanho da tela de ...
2
votos
2
respostas
8mil
visitas
Layout responsivo bootstrap
Estou criando um sistema utilizando bootstrap, para deixar responsivo utilizei as classes col-xs-12 col-md-2, quando eu redimensiono a pagina a responsividade funciona perfeitamente, porém quando eu ...