Um usuário perguntou ?
Oi pessoal, eu tenho lutado com esta questão por um tempo agora e tentei respostas diferentes.
Quero que todo o formulário de contato ocupe toda a largura da página.
Tentei o seguinte sem sucesso.
.wpcf7 {largura: 100%! importante}
e também
.wpcf7-form {largura: 100%! importante}
mas nenhum deles funcionou.
por favor ajude
lançador de tópicos
(@luke-mersh)
2 anos, 5 meses atrás
então eu tentei: div.wpcf7 {width: 100%! important;} pareceu resolver o problema, mas quando usei a mesma técnica novamente, não teve o mesmo efeito.
por favor ajude.
(@buzztone)
2 anos, 5 meses atrás
Visão Formulário de contato de estilo – há um link para um artigo que escrevi na parte inferior dessa página (sugerido pelo autor do plugin CF7, embora eu não possa vincular diretamente a ele aqui), que aborda esse tópico em detalhes.
Use o Chrome Dev Tools para examinar o estilo CSS aplicado ao seu formulário e determinar quais alterações você precisa fazer.
Se você puder incluir um link para seu formulário, outras pessoas poderão usar o Chrome Dev Tools para sugerir o CSS adequado.
lançador de tópicos
(@luke-mersh)
2 anos, 5 meses atrás
Olá Neill. Eu usei minhas ferramentas de desenvolvimento, mas isso não parece fazer diferença, pois estou tentando tentar novamente hoje.
lançador de tópicos
(@luke-mersh)
2 anos, 5 meses atrás
As ferramentas de desenvolvimento web também não alteram a largura do formulário.
aqui está meu código:
div.wpcf7 {largura: 100%! importante; }
.wpcf7 { background: #ccc; largura: 100%; }
nenhum dos formulários tem a largura total da página deste SEC.
lançador de tópicos
(@luke-mersh)
2 anos, 5 meses atrás
eu acredito que eu faço isso
Eu li que todos os formulários tem a classe wpcf7 e todo o container do formulário é feito de div com a classe wpcf7, mas se não mudar 100% de largura, e se eu fizer alterações de pixel, só se aplica à direita do formulário, estou tentando fazer o contêiner abrange toda a largura da página.
Muito obrigado antecipadamente
lançador de tópicos
(@luke-mersh)
2 anos, 5 meses atrás
Eu tentei mudar a aparência através do desenvolvedor da web, mas a ‘largura’ especificada em% parece não fazer nada.
Este é o código do formulário:
<form method="post" action="
<div class="inquiry-form">
<h3 class="inquiry-title">Enquire about this property</h3>
<div role="form" class="wpcf7" id="wpcf7-f12490-p12399-o1" lang="en-GB" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/property/detached-mediterranean-style-villa-in-cabo-roig/#wpcf7-f12490-p12399-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="12490" />
<input type="hidden" name="_wpcf7_version" value="5.0.4" />
<input type="hidden" name="_wpcf7_locale" value="en_GB" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f12490-p12399-o1" />
<input type="hidden" name="_wpcf7_container_post" value="12399" />
</div>
<p><label> Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </label></p>
<p><label> Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<input type="hidden" class="wpcf7-pum" value="{"closepopup":false,"closedelay":0,"openpopup":false,"openpopup_id":0}" /><div class="wpcf7-response-output wpcf7-display-none"></div></form></div> </div>
</form>Não consigo descobrir como fazê-lo escalar todo o caminho. Apliquei uma cor de fundo para ver a saída e o div.wpcf7 Trabalhei uma vez, mas depois disso o código em si não foi restaurado e agora estou perdido.
por favor ajude. Muito obrigado antecipadamente
(@buzztone)
2 anos, 5 meses atrás
Se você puder incluir um link para seu formulário, posso usar o Chrome Dev Tools para sugerir o CSS adequado; caso contrário, não vejo o que está acontecendo com o estilo do seu formulário.
(@buzztone)
2 anos, 5 meses atrás
A edição foi republicada com o link do formulário em
(@buzztone)
2 anos, 5 meses atrás
O Chrome Dev Tools mostra o seguinte CSS aplicado ao seu formulário CF7:
div.wpcf7 {
background-color: #ccc;
width: 100% !important;
border: 5px solid;
}
div.wpcf7 {
margin: 0;
padding: 0;
}Isso parece funcionar conforme o esperado, mas você não vê a cor de fundo porque o preenchimento está definido como zero.
As mudanças que você propõe parecem ser muito fáceis de implementar, desde que você tenha um entendimento básico de como usá-las. Ferramentas do desenvolvedor do Chrome.
lançador de tópicos
(@luke-mersh)
2 anos, 4 meses atrás
[Solved]
Obrigado por toda sua ajuda.
Isto foi útil?
0 / 0