Mobile view blank space overlaps content

[fritolays]

When viewing the page on mobile there is a 35px blank space that overlaps the page content.
How do I go about removing this?

[nabeel]

Hi there,

Thanks for writing around! It looks like the Form CSS is conflicting with the theme, to fix the issue, try adding the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    html .formcraft-css .fc-form .form-page-content .form-element-type-customText:first-child, 
    html .formcraft-css .fc-form .form-page-content .form-element-type-heading:first-child {
        margin-top: 0 !important;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

[fritolays]

That seems to have done it.
And yes I know of the inspector and such; just couldnt locate the culprit.

Thanks kindly,

[nabeel]

Glad we could help.

Cheers!