Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
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:
Imagem do site, com background e img em cima do background:
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 :/
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
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.
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?):
@media (min-width:1px) and (max-width:767px) {
@media (min-width:768px) and (max-width:991px) {
@media (min-width:992px) and (max-width:1199px) {