Ir para conteúdo
Gabrielvt14

Bootstrap responsivo, imagem

Recommended Posts

Olá. Estou com um problema que não consigo resolver, estou utilizando bootsrap. Na verdade o problema esta quando tento deixar ele responsivo... segue imagens para explicar melhor:

Deve ficar assim: 

forum2.thumb.jpg.ad4ff2ef9dfb5b09dd3de1999782c272.jpg

O celular deve ficar no final do fundo amarelado!!!

 

E a imagem de fundo esta assim... em PNG, com este "corte na horizontal" na parte de baixo da imagem: 

sessionThree1.thumb.jpg.a630102ab4c4a35e4877012e1e5edb27.jpg

 

Imagem do site, com background e img em cima do background: 

forum.thumb.jpg.51c37ddff7c51b3d93edcdf352b2867d.jpg

O background é esse tom amarelado.. a imagem esta em PNG, então este fundo branco abaixo da imagem faz parte do background

 

Se eu ajustar no CSS com padding/margin eu consigo colocar o celular no final do fundo amarelado. Mas quando diminuir a tela, a imagem do celular irá subir e não ficará no final do tom amarelado... e se eu fixar a imagem do celular no final da div, o celular fica no final do tom branco, como na primeira imagem.

 

Alguém sabe de alguma possível solução? Não sei mais o que fazer :/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se você usa Bootstrap, existem pontos de quebra já definidos no layout. Use sua solução de padding/margin, e para cada quebra de layout, você altera o valor deste padding/margin!

 

exemplo (com valores hipotéticos, OK?):

.imagemCelular{
	margin-top:15px;
	margin-left:15px;
}

@media (min-width:1px) and (max-width:767px) {
	.imagemCelular{
		margin-top:0;
		margin-left:0;
	}
}

@media (min-width:768px) and (max-width:991px) {
	.imagemCelular{
		margin-top:50px;
		margin-left:100px;
	}
}

@media (min-width:992px) and (max-width:1199px) {
	.imagemCelular{
		margin-top:70px;
		margin-left:120px;
	}
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu pensei nesta solução mas o problema desta solução é que por exemplo, se a tela estiver com 768px eu ajusto a imagem com padding/margin para ficar sempre na parte de baixo do fundo amarelo... mais ai se vou diminuindo a tela e chego, por exemplo, com 800px, a imagem sai da parte de baixo

 

Então para usar isso e ter uma solução efetiva, eu teria que fazer uma "@media" a cada pixel

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você está usando medidas relativas para montar seu layout (em, %)?

Ou absolutas (pixels)?

 

Quando eu faço o layout com medidas absolutas, resolvo meus problemas desta maneira, com media queries, já que o bootstrap geralmente tem 3 ou 4 linhas.

 

outra coisa que você pode fazer é utilizar as media queries, mas ao invés de usar padding/margin, use position(absolute) e bottom/top/left/right.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
×

Informação importante

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