Form contact uneditable in Agency theme

Hello !
First thanks ! I’m new to Grav and I love the way it works :slight_smile:
But I’ve got a strange problem, using the Agency theme, the form contact is not editable when the screen width is between 993 - 1200 px…
This problem seems to occur also on the demo
https://demo.getgrav.org/agency-skeleton/
Does someone already solved this ? I couldn’t find anything usefull on Google…

@Mathieu, Did some research…

When the contact form changes into 2 columns (>= 992), the column is ‘float’-ed to the left. Somehow, it seems as if the <input> is positioned behind/below a parent element because of that. Moving the input ‘up’ resolved it.

See if it helps if you add the following to the css:

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    z-index: 1;
  }
}

Why does the problem disappear at min-width: 1200? I don’t know…

By the way, the theme uses Bootstrap v3.x which is an old version. Bootstrap v4.x uses flexbox and will probably not have the issue.

Thank you very much pamtbaau !!

I’ve just add your code and it works like a charm !

Glad to see there is an active and efficient community :slight_smile:

Have a nice day !