Diversos problemas de estrutura no site

[WilhelmSe]

   Olá, bom sou muito leigo ainda nesses assuntos, então não me zoem se o código que vocês encontrarem for bem... Lixoso , Obg pela compreensão '-'

------------------------------------------------------------------------------------------------------------------

   Atualmente estou enfrentando alguns problemas de estrutura no meu site, vou lista-los abaixo:

 

 

 

1º - botões saem do alinhamento. Quando visto no Google Chrome esta página age do jeito que eu quero (com os botões de compra alinhados do lado da imagem do livro), mas quando visto de algum aparelho mobile, ou até mesmo do internet explorer, ele buga totalmente.

 

http://wowlore1.blogspot.com.br/2015/02/livro-ordem-diablo.html

 

 

 

2º - Como impedir que os itens se desalinhem? Quer dizer, tenho algumas páginas nesse mesmo site que servem para apresentar personagens de um jogo, bom, se a página for vista por um navegador no PC tudo bem, quer dizer, se você estiver vendo com a resolução "correta", isso por que, quando eu dou zoom a página sai do alinhamento, quer dizer, ela é dividida em duas partes, a primeira é um vídeo WEBM colocado como plano de fundo, a segunda é uma imagem como background com um texto sobre o personagem, acontece que quando dou zoom as duas partes simplesmente se separam, abrindo um enorme espaço em branco.

 

http://wowlore1.blogspot.com.br/2015/09/reaper-overwatch.html

 

   Eu até sei o por que isso acontece, é por causa do "height: 405px;" que eu coloquei, mas não sei como modificar o código de modo que ele continue alinhado sobre a segunda parte da pagina sem fazer uso desse "height".

 

 

 

 

 

3º - Como fazer para que o vídeo seja trocado por uma imagem quando a página é visualizada por um aparelho mobile? Eu tenho 2 navegadores em meu tablet, testei com ambos, no UC Browser ele estragou toda a pagina por causa do vídeo e no Opera ele simplesmente não mostrou o vídeo. Se você não entendeu direito o que eu quis dizer basta olhar essa página, da onde tirei minha inspiração.

 

http://us.battle.net/heroes/pt/heroes/sylvanas/

 

   Perceba que quando você redimensiona a janela do navegador o vídeo é trocado por uma imagem (o mesmo que acontece quando visualizado por um aparelho mobile), eu fiquei lendo o código mas não entendi direito como isso acontece (iniciante :P)

   Gostaria de fazer isso na mesma página do segundo item.

 

 

 

 

4º - Como fazer para que a página se encaixe corretamente no navegador? Bom, se você acessou a página por um aparelho mobile deve ter visto que fica sobrando um espaço em branco na lateral direita (isso quando visto no modo paisagem) , no PC é a mesma coisa, mas apenas nas páginas internas (só a inicial fica certinha). PS: meu site usa um template responsivo.

 

 

[DiF]

@GuilhermeYuji Tudo isso que você quer, a resposta está na Responsividade.

 

Use media queries para definir as regras de cada resolução desejada.

Podes trabalhar com mínimos e máximas. 

Por exemplo  se a resolução for igual ou maior a 1280px é de um jeito,  se a resolução for igual ou maior que 480px é outra regra e por aí vai.

 

A responsividade foi criada justamente para suprir esse problema, empilhando os elementos um em cima do outro caso estiver vendo em um celular.

 

 

[WilhelmSe]

Consegui, valeu Dif.

 

    Realmente era só usar media queries, mas pra funcionar certinho o alinhamento daquelas páginas com vídeos que eu mencionei eu tive que trocar todos os "width: numero px" e "height: numero px" por "width: numero em" e "height: numero em" por ser flexível, agora ta certo, não sai do alinhamento.