Browser diffrences

Dear Team,

I noticed that the website i’m building looks different on chrome and different in Mozilla.

While my little customizations look nice on chrome there out of proportion on mozilla.

#1 the welcome area has a overlay pattern. the size perfeclty covers the text + button in chrome in mozilla the overlay pattern is not wide enough and the text escapes the box.

#2 Im having difficulity configuring the size of the contact form so it will be full length. If I do this correctly in Chrome is is way out of proportion in mozilla and vice versa.

example Mozilla perfect fit but chrome is not good:

<p>Uw naam (verplicht)<br />
[text* your-name 135/100]</p>

<p>Uw email (verplicht)<br />
[text* your-email 135/100]</p>

<p>Uw telefoonnummer<br />
[text* your-phone 135/100] </p>

<p>Onderwerp<br />
[text* your-subject 135/100] </p>

<p>Uw bericht<br />
[textarea* your-message 135x10/100] </p>

<p>[submit “Verzenden”]</p>:

Hope you can help.


  1. Actually, it doesn’t cover it in Chrome either. It looks exactly the same. Add this please and adjust as needed:

.header-info {
    background-color: rgba(0,0,0,0.6);
    padding: 30px 15px;
    width: 60%;
    left: 20%;
.header-image::after {
    display: none;

  1. This should do it:

.wpcf7-form input {
    width: 100%;
.wpcf7-form-control.wpcf7-submit {
    width: auto;

AAAh excellent :slight_smile: I pounder for days and you fix it in a minute :wink:

thank you