Remover bordas Css

[Gasparoide 1]

Boa noite, pessoal. Gostaria de pedir ajuda de vocês.

 

Estamos lançando um site adulto e, quando navegando via mobile, umas bordas exageradas espremem o vídeo embedado e até impossibilitam que o usuário aperte o play. Estamos começando e esse template foi o melhorzinho que pudemos pagar, custou 40 mangos no mercado livre. Se chama NovaVideo.

 

Pelo que percebi, temos dois problemas;

 

1º a caixa cinza que faz borda para o vídeo teria que ficar sem borda nenhuma ou ir pra trás do vídeo.

 

2º o vídeo em sí deveria ocupar todo o espaço disponível lateral, dependendo da resolução da tela.

 

Tentei entrer no "Inspecionar" do Firefox e ir mudando ou desmarcando os ítens para ver se conseguia chegar no resultado que eu quero, mas nao consegui encontrar depois de horas fuçando lá.

 

É importante que isso aconteça apenas nas telas mobile e pelo que eu ví na listagem de estilos que há no "Editar Estilos" do Firefox, existe um arquivo chamado "responsivo.css". Esse arquivo eu nao achei no Painel do Wordpress, mas achei ele no FTP então posso mudar, caso seja necessário ou posso postar aqui se quiserem.

 

Se alguém quiser entrar pra inspecionar os códigos da página: http://tela---.com/2016/04/08/despedida-de-solteira-na-boate-gringa/

 

AVISO: É um site ADULTO, então cuidado ao entrar em ambiente corporativo.

 

Não se preocupem, removi toda publicidade popup pra não irritar a alma caridosa que quiser entrar lá pra tentar me ajudar.

 

Abaixo o atual e como eu quero que fique.

Muito, muito obrigado.

 

 

como está:

 

 

como eu gostaria:

 

[L. Henrique 179]

Gasparoide,

No momento estou no trabalho, então não vou conseguir visualizar hahahaha. Mesmo assim vou tentar te ajudar, já que me parece uma questão de container.

Muito possivelmente essa sua caixa do vídeo está dentro de um container (uma div com uma classe X, pode ser container, wrapper, etc...). Essa classe da div pai deve conter uma propriedade chamada Padding que você pode anular. Bom, nisso o vídeo já fica ok, agora pra tirar as bordas externas...

Pra isso você precisa definir um media query. Esse elemento pai dos vídeos deve ter uma largura X que precisa ser de 100% quando estiver no mobile.

Ex.:

@media screen and (min-width: 380px) {
   .container {
      width: 100%;
      margin: 0;
      padding: 0;
   }
}

Veja se essas coisas resolvem seu caso.

[Gasparoide 1]

Gasparoide,

 

No momento estou no trabalho, então não vou conseguir visualizar hahahaha. Mesmo assim vou tentar te ajudar, já que me parece uma questão de container.

 

Muito possivelmente essa sua caixa do vídeo está dentro de um container (uma div com uma classe X, pode ser container, wrapper, etc...). Essa classe da div pai deve conter uma propriedade chamada Padding que você pode anular. Bom, nisso o vídeo já fica ok, agora pra tirar as bordas externas...

 

Pra isso você precisa definir um media query. Esse elemento pai dos vídeos deve ter uma largura X que precisa ser de 100% quando estiver no mobile.

 

Ex.:

@media screen and (min-width: 380px) {
   .container {
      width: 100%;
      margin: 0;
      padding: 0;
   }
}

Veja se essas coisas resolvem seu caso.

 

Muito obrigado, L.Henrique.

 

Com sua dica, consegui mudar duas coisas que fizeram exatamente o que eu queria, foram elas:

 

1º - No arquivo Style.css, linha 650, alterei o padding de 10px para 0px

Isso fez o vídeo ocupar toda área do quadro cinza, removeu as bordas.

 

(se quiser dar uma olhada nos arquivos css que citei, upei aqui: https://goo.gl/iOBdZF)

 

 

2º - No arquivo responsive.css, linha 1238, alterei o width de 260 para 344

Isso fez o quadro cinza e o vídeo ocuparem toda a área lateral da tela do device, ficando assim:

 

 

Meu erro foi pensar que fazendo isso, a faixa branca do video embedado fosse mais pra baixo, possibilitando que o usuário clicasse no play...

Sendo assim, acho que temos um segundo problema; colocar essa faixa mais pra baixo, reduzir ela de tamanho ou eliminar ela de vez, o que conseguirmos, é lucro. Ela só não pode atrapalhar o vídeo.

 

Vi em um outro site que conseguiram botar ela lá pra baixo, só não sei como:

 

Link: http://raissapaulistinha.com.br/ganhador-da-calcinha-da-raissa/#

Se puder me ajudar a colocar essa maldita faixa pra baixo no meu site, pra ficar igual ao site da Raissa eu agradeceria muito.

 

Obrigado mesmo.

[L. Henrique 179]

De novo não da pra acessar hahahaha Então vou tentar novamente mostrar um caminho pra uma possível solução...

Esse vídeo é um embed, provavelmente, então faça o seguinte:

1. Abra sua página e clique com o botão direito na caixa do vídeo;
2. Selecione a opção Inspecionar Elemento;
3. Veja se o elemento fica em destaque (cor azul) quando você passa o mouse sobre a tag dele (no inspetor);
4. Caso seja isso, veja qual é a classe desse elemento e a altere no seu próprio CSS com tags, por exemplo:

5. .bloco {
      margin-top: 100px !important;
   }
   

[Gasparoide 1]

Obrigado novamente, Henrique.

 

Tentei, mas nao consegui alterar nada que desse esse efeito. Aparentemente, tudo que está dentro do iframe ja vem pronto do site de origem do video e nao posso alterar. Parece que todas as configurações estão inline mesmo.

 

Obrigado mesmo assim. Vou continuar tentando, Aviso aqui o que conseguir.

[pwd 7]

Para manipular o DOM, use JS.