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).

Filtrar por
Ordenado por
Com tags
-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 ...
lebarrichello's user avatar
-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</...
Lice's user avatar
  • 7
-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 ...
Paulo Gama's user avatar
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 ...
Gabriel Stocco's user avatar
-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 ...
Ronera's user avatar
  • 1
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 = ...
user270284's user avatar
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. ...
Neno's user avatar
  • 9
-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 ...
Leal's user avatar
  • 3
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 ...
paulotarcio's user avatar
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 ...
Vi Figueiredo's user avatar
-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 :) ...
prodjasko's user avatar
-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 ...
Vi Figueiredo's user avatar
-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 { ...
João Túlio Soares Batista's user avatar
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 é ...
Gabriel Schmidt Cordeiro's user avatar
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 ...
Paulo Monteiro's user avatar
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 ...
Samuel Felipe's user avatar
-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: ...
user218331's user avatar
-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 ...
Santos's user avatar
  • 26
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 ...
Jabrel's user avatar
  • 45
-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 ...
willian's user avatar
  • 11
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 ...
Marcielli Oliveira's user avatar
-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 ...
Luh 's user avatar
  • 103
-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 ...
Mizrain Phelipe Sá's user avatar
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 ...
Maysa Santiago's user avatar
-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-...
Dalmo Cabral's user avatar
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 ...
Anderson Santos's user avatar
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 ...
Criação Paquetá's user avatar
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/...
Leandro Marzullo's user avatar
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 ...
Kauê gouveia lima's user avatar
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"> ...
Gabi M's user avatar
  • 13
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. ...
Arthur Abitante's user avatar
-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:...
Fernando Munhoz's user avatar
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, ...
Lucas Mendes Ribeiro's user avatar
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 ...
Hiran Júnior's user avatar
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?
Denis Caixeta's user avatar
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 ...
arenas's user avatar
  • 29
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 ...
user2876585's user avatar
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 (...
user avatar
-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 ...
MatCunha's user avatar
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 ...
Gabriella Selbach's user avatar
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 ...
Gabriella Selbach's user avatar
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 ...
Susan_8940's user avatar
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....
matheusdouradobr's user avatar
-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: ...
matheusdouradobr's user avatar
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> ...
Samuel Reis's user avatar
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
goio's user avatar
  • 767
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 ...
Moises Fausto's user avatar
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 ...
andrefilipeos's user avatar
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 ...
Luke's user avatar
  • 304
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 ...
Evandro Ignacio's user avatar