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).
240
perguntas
-3
votos
0
respostas
9
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 ...
-3
votos
0
respostas
10
visitas
Media Queries só funcionam no DevTools nos dispositivos não [fechada]
Fiz um projeto com html e css simples e adicionei alguns media queries.(minha resolução é de 1980x1080)
Acontece que quando defino por exemplo 1366x768 (que é uma resolução comum para notebooks) no ...
-2
votos
0
respostas
22
visitas
Como ajustar o background, sem criar uma "margem" embaixo
Conforme eu vou diminuindo a janela do navegador aumenta um espaço da div de baixo.
Queria que ficasse com o mesmo resultado porem sem esse espaço entre as divs, eu usei o background:cover e meio que ...
0
votos
1
resposta
30
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
34
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
36
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
87
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
70
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
90
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
84
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
141
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
27
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
37
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
239
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
516
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
248
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
119
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
387
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
4mil
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
602
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 ...
0
votos
1
resposta
565
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-...
1
voto
1
resposta
31
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
62
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
54
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
934
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
407
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
707
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
36
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
7mil
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
44
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
95
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
208
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
1mil
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
89
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
301
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
88
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
200
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
95
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
3mil
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
20
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
32
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
658
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
7mil
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 ...
1
voto
0
respostas
18
visitas
Conteúdo assíncrono para mobile
Estou trabalhando em um novo projeto de site, onde algumas áreas necessitarão de um tratamento especial do html para apresentação. Por exemplo: para o desktop, temos um carrossel de imagens 1920x800, ...
-1
votos
1
resposta
77
visitas
Como deixar uma imagem colocada pelo css responsivo.?
Olá galera eu tô com um pequeno problema aqui, é o seguinte...
Fiz o rodapé do site tudo certinho, com largura fluida de 100% mas comecei fazer pela versão desktop e a img de fundo que eu coloquei ...
4
votos
2
respostas
2mil
visitas
Existe diferença entre flex-basis, flex-grow e width? Qual é a recomendação de uso delas em um container Flex?
Estou com uma duvida técnica sobre a utilização das propriedade flex-basis, flex-grow e width. Repare que na imagem abaixo eu consegui o mesmo resultado usando as 3 propriedades.
Ai fiquei na dúvida,...