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).
318 perguntas
-3
votos
0
respostas
43
visitas
meu media query nao funciona nao seu o porque. fiz tudo certinho como esta na aula e nao vai [fechada]
*{
box-sizing: border-box;
padding: 0%;
margin: 0%;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.header-inner-content{
max-width: 1300px;
margin-left: auto;
...
-3
votos
2
respostas
65
visitas
Alguns Problemas no modo Responsividade que não consigo solucionar
Não estou conseguindo achar solução em alguns items quando entro no modo responsividade, e quando vou expandindo e diminuindo a tela, alguns itens saem de sua posição e fica se movendo pela tela, o ...
-1
votos
1
resposta
295
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
147
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 ...
-3
votos
0
respostas
31
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
53
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
57
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
159
visitas
Código responsivo para dispositivos mobile
Boa tarde!
Gente, existe alguma forma de adequar um código como o abaixo para que fique responsivo de forma geral em qualquer dispositivo mobile?
Todas as formas que tentei ajustando os atributos ...
-2
votos
1
resposta
116
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
180
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
98
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
790
visitas
NÃO CONSIGO ALINHAR MEU SVG AO TEXTO DA MINHA LISTA
Gostaria de alinhar meu ícone SVG ao lado do meu <li><a href="#">INFORMÁTICA</a></li>.
Já tentei utilizar padding, margin mas os dois estão se movendo juntos pois o ...
-1
votos
1
resposta
119
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
186
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
355
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
32
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
46
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
537
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 ...
-1
votos
1
resposta
25
visitas
Como deixo uma <div> ativa apenas para um tamanho de tela? Por exemplo: apenas em 750px ela fica ativa (sou iniciante)
<div id="750px">
<a href="https://www.instagram.com/p/CKBoR2ZDlwL/" target="_blank" rel="external"><img src="img/camisas/camisa0001.png&...
-2
votos
1
resposta
417
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
2mil
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
207
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
551
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
6mil
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 ...
0
votos
0
respostas
208
visitas
Erro bootstrap video embed no modal
Estou tendo dificuldades para incorporar vídeo do meu site no modal, coloquei um do youtube e deu certo mas quando tento por os meus em mp4 da erro.
Sei que o erro está aqui
<div class="...
-1
votos
1
resposta
1mil
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 ...
-2
votos
2
respostas
182
visitas
Rodapé não está sendo responsivo
Eu fiz um site e o restante está responsivo, sem problema algum. Mas, o meu footer, está ficando por cima de outros elementos quando vou testar em telas menores.
HTML:
<footer class="...
-1
votos
1
resposta
2mil
visitas
Menu responsivo com CSS, HTML e JS
Estou fazendo um menu responsivo usando o visual studio. Porém, quando estou deixando a página em 768px, os itens (inicio, missão, sobre...) que deveriam estar quando eu clicasse no menu hambuguer, ...
0
votos
1
resposta
23
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
765
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
3mil
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
44
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
102
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
72
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
...
1
voto
0
respostas
289
visitas
Responsive full background Image [fechada]
I'm having some issues with my background image.
I have a full background image in my website, and I want a responsive website, but when I try to see it on my phone, the image height is not correct.
...
1
voto
1
resposta
910
visitas
Imagem está sendo cortada quando o elemento CSS "max-width" é usado
No rodapé deste site Wordpress há várias imagens de logotipo.
Estas imagens são inseridas pelo próprio usuário administrador do site
dentro de uma tabela Pods, portanto eu não tenho controle ...
0
votos
3
respostas
2mil
visitas
Table não ficando responsive bootstrap 4
Estou me aventurando no frontend apesa que gosto do backend. Estou com dificuldade de fazer a minha tabela responsivo. Qual é a melhor maneira de fazer um perfil de usuário,deixando ele no tamanho dos ...
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
549
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. ...
0
votos
1
resposta
2mil
visitas
Usar bootstrap ou CSS manualmente para responsividade? [fechada]
Estou com uma duvida em quais situações são mais validas em investir para ter conhecimento em front-end, inclusive tratando-se de responsividade.
Seria mais importante confiar no Bootstrap para deixar ...
-1
votos
1
resposta
1mil
visitas
Botões do menu HTML não funcionam
Boa noite galera, estou fazendo um mini website para a prova 1 de Programação Web da faculdade, mas houveram alguns problemas no mesmo.
Fiz um menu responsivo, com dropdown e collapse para quando o ...
0
votos
1
resposta
202
visitas
Porque o texto está fora de linha? e como solucionar no bootstrap 4?
Continuando a minha pergunta feita anteriormente, estou utilizando agora o seguinte código. Ocorreu outro problema simples que não estou conseguindo resolver. O texto escrito "LIMPAR FILTROS" fica ...
1
voto
1
resposta
450
visitas
Problemas em responsividade do bootstrap em inputs, labels e selects
Estou com problemas de resolver um simples problema de responsividade utilizando o bootstrap 4. Meu desejo é quando redimensionar para celuar, os inputs, selects e labels estejam sobrepostos e ...
-1
votos
1
resposta
1mil
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
48
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
9mil
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
62
visitas
Com ConstraintLayout não se usa mais match_parent?
Com o recurso de ConstraintLayout não se usa mais match_parent?
1
voto
1
resposta
136
visitas
Ajuda - DIV circular com imagem de fundo responsiva [fechada]
Caros, boa tarde!
Estou precisando de ajuda para criar uma div com imagem de fundo.
Eu fiz esse código:
.this-image{
//border: 2px solid #AD235E;
border-radius: 150px;
width: ...
2
votos
2
respostas
150
visitas
menu com aba inclinada
oi, estou desenvolvendo uma página html e estou utilizando bootstrap, gostaria de fazer um menu com abas e que fosse levemente iclinado para direita... mais ou menos como essa ideia do arquivo...
...
1
voto
0
respostas
13
visitas
Menu responsivo dropdown não funciona corretamente em dispositivos mobile, como resolver? [duplicada]
Olá,
Estou construindo uma página web responsiva com um menu dropdown. No navegador do desktop ela funciona blza, mas no celular não funciona, a página apenas diminui de tamanho sem fazer o dropdown. ...