Form is not responsive on mobile devices

look please at my form on the mobile device :

http://smarteracademy.eu/enquete/

 

i received from you info that i should put CSS like this , but i suppose i should change it again:

@media only screen 

 

and (max-device-width : 1024px)  {

 

.form-all{

 

height: 3043px!important;

 

}

 

}

As I check the form on a mobile device, the height of the form is more and not looking good on the web page. As I clone the form to my account and removed the CSS code. When the check the form using the direct URL, it seems to be displaying correctly. Please try removing the CSS code on the form and see how it is displayed on the web page. 

Please get back to us if the issue still persists. We will be happy to assist you further. 

i removed the CSS , cleaned the cache and now it doesn't work on portable ;-( -  (android chrome and Internet) ;-(

i see on my phone two questions and then long long grey background.... ;-(

I have been checking your form and I can see it has multiple pages, the form currently shows fine on mobile devices, I can see the first two questions and the page break button, it moves properly to the next page when clicking on the next button: 

I can see you embedded your form using the default code, I would suggest you to try with the iFrame code instead, please also set the scrolling property to "yes". 

Guide to get the code: https://www.jotform.com/help/148-Getting-the-form-iFrame-code

Hope this helps. 

Hi

I really appreciate your time to help me because I need it still.

I did I frame and checked on new smartphone of a stranger, and after two questions I have still grey long background....

More over on your previous photo I see you have it too!;)

I checked your form (https://www.jotform.com/71373445460354) and I still can see the CSS code that makes your form to have a long gray background. Please remove this as what my colleague has suggested and it will work fine.

 

Regards.

i have removed it from my wordpress panel.

this is my CSS :

/*

Theme Name: Oblique

Theme URI: http://themeisle.com/themes/oblique

Author: Themeisle

Author URI: http://themeisle.com/

Description: Oblique is a creative masonry theme that works great for fashion or general bloggers. Amongst the features you will find a a parallax header image, full color control with unlimited color variations, easy access to all Google Fonts, responsive design etc.

Version: 2.0.3

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: oblique

Tags: custom-colors, custom-background, custom-menu, custom-header, featured-images, sticky-post, theme-options, threaded-comments, translation-ready

 

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

 

Oblique is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.

*/

 

body {

color: #50545c;

background-color: #1c1c1c;

font-family: "Open Sans", sans-serif;

font-size: 15px;

line-height: 1.55;

word-wrap: break-word;

}

h1,

h2,

h3,

h4,

h5,

h6 {

color: #000;

font-family: "Playfair Display", serif;

}

a,

a:hover {

text-decoration: none;

}

a {

color: #23b6b6;

-webkit-transition: color 0.3s;

transition: color 0.3s;

}

a:hover {

color: #333;

}

.bypostauthor {

display: block;

}

 

 

/*--------------------------------------------------------------

Forms

--------------------------------------------------------------*/

 

button,

input,

select,

textarea {

margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */

font-size: 100%; /* Corrects font size not being inherited in all browsers */

vertical-align: baseline; /* Improves appearance and consistency in all browsers */

}

 

button,

.button,

input[type="button"],

input[type="reset"],

input[type="submit"] {

padding: 15px;

border: 0;

color: #fff;

background-color: #23b6b6;

font-weight: 700;

cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */

-webkit-transition: all 0.3s;

transition: all 0.3s;

 

-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */

}

input[type="submit"] {

margin-top: 5px;

}

button:hover,

.button:hover,

input[type="button"]:hover,

input[type="reset"]:hover,

input[type="submit"]:hover {

color: #fff;

background-color: #17191b;

text-decoration: none;

}

 

button:focus,

input[type="button"]:focus,

input[type="reset"]:focus,

input[type="submit"]:focus,

button:active,

input[type="button"]:active,

input[type="reset"]:active,

input[type="submit"]:active {

border-color: #aaa #bbb #bbb;

-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);

box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);

}

 

input[type="checkbox"],

input[type="radio"] {

padding: 0; /* Addresses excess padding in IE8/9 */

}

 

input[type="search"] {

-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */

box-sizing: content-box;

 

-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */

}

 

input[type="search"]::-webkit-search-decoration {

/* Corrects inner padding displayed oddly in S5, Chrome on OSX */

-webkit-appearance: none;

}

 

button::-moz-focus-inner,

input::-moz-focus-inner {

padding: 0;

/* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */

border: 0;

}

 

input[type="text"],

input[type="email"],

input[type="url"],

input[type="password"],

input[type="search"],

textarea {

width: 100%;

border: 1px solid #ebebeb;

border-radius: 3px;

color: #666;

}

 

input[type="text"]:focus,

input[type="email"]:focus,

input[type="url"]:focus,

input[type="password"]:focus,

input[type="search"]:focus,

textarea:focus {

color: #111;

}

 

input[type="text"],

input[type="email"],

input[type="url"],

input[type="password"],

input[type="search"] {

padding: 13px;

}

 

textarea {

overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */

width: 100%;

padding-left: 8px;

vertical-align: top; /* Improves readability and alignment in all browsers */

}

 

 

/*--------------------------------------------------------------

Posts nav

--------------------------------------------------------------*/

 

.site-main .comment-navigation,

.site-main .posts-navigation,

.site-main .post-navigation {

overflow: hidden;

margin: 45px 0;

}

.site-main .comment-navigation a,

.site-main .posts-navigation a,

.site-main .post-navigation a {

color: #fff;

}

.comment-navigation .nav-previous,

.posts-navigation .nav-previous,

.post-navigation .nav-previous {

float: left;

max-width: 50%;

padding: 15px;

background-color: #17191b;

-webkit-transition: background-color 0.3s;

transition: background-color 0.3s;

}

.comment-navigation .nav-next,

.posts-navigation .nav-next,

.post-navigation .nav-next {

float: right;

max-width: 50%;

padding: 15px;

background-color: #17191b;

text-align: right;

-webkit-transition: background-color 0.3s;

transition: background-color 0.3s;

}

.nav-previous:hover,

.nav-next:hover {

background-color: #23b6b6;

}

.blog .nav-previous {

margin-left: 15px;

}

.blog .nav-next {

margin-right: 15px;

}

 

 

/*--------------------------------------------------------------

# Accessibility

--------------------------------------------------------------*/

 

/* Text meant only for screen readers. */

.screen-reader-text {

overflow: hidden;

clip: rect(1px, 1px, 1px, 1px);

position: absolute !important;

width: 1px;

height: 1px;

}

 

.screen-reader-text:hover,

.screen-reader-text:active,

.screen-reader-text:focus {

display: block;

clip: auto !important;

z-index: 100000; /* Above WP toolbar. */

top: 5px;

left: 5px;

width: auto;

height: auto;

padding: 15px 23px 14px;

border-radius: 3px;

color: #21759b;

background-color: #f1f1f1;

-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);

box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);

font-size: 14px;

font-size: 0.875rem;

font-weight: bold;

line-height: normal;

text-decoration: none;

}

 

 

/*--------------------------------------------------------------

# Alignments

--------------------------------------------------------------*/

 

.alignleft {

display: inline;

float: left;

margin-right: 1.5em;

}

 

.alignright {

display: inline;

float: right;

margin-left: 1.5em;

}

 

.aligncenter {

display: block;

clear: both;

margin-right: auto;

margin-left: auto;

}

 

 

/*--------------------------------------------------------------

# Widgets

--------------------------------------------------------------*/

 

.widget-area {

overflow-y: auto;

position: fixed;

z-index: 99;

top: 0;

left: -360px;

width: 360px;

height: 100%;

padding: 30px;

background-color: #17191b;

-webkit-transition: all 0.8s;

transition: all 0.8s;

}

.widget-area,

.widget-area a {

color: #f9f9f9;

}

.widget-title {

margin: 0 0 20px;

color: inherit;

}

.widget-area a:hover {

color: #23b6b6;

}

.admin-bar .widget-area {

top: 32px;

}

.widget-area-visible {

left: 0;

}

.sidebar-toggle {

position: fixed;

z-index: 101;

top: 20px;

left: 75px;

color: #fff;

text-shadow: 0 0 1px #000;

font-size: 28px;

line-height: 1;

cursor: pointer;

-webkit-transition: all 0.8s;

transition: all 0.8s;

}

.admin-bar .sidebar-toggle {

top: 52px;

}

.sidebar-toggled {

left: 380px;

}

.sidebar-nav {

margin-bottom: 30px;

}

.widget {

margin: 0 0 30px;

}

.widget ul {

padding: 0 0 0 20px;

}

.widget .children {

padding-left: 30px;

}

.widget li {

padding: 3px 0;

}

 

/* Make sure select elements fit in widgets. */

.widget select {

max-width: 100%;

}

 

/* Search widget. */

.widget_search .search-submit {

display: none;

}

 

/* Default widgets */

.widget_recent_entries ul,

.widget_archive ul,

.widget_pages ul,

.widget_recent_comments ul,

.widget_categories ul {

padding: 0;

list-style: none;

}

.widget_recent_entries li::before,

.widget_archive li::before,

.widget_pages li::before,

.widget_recent_comments li::before,

.widget_categories li::before {

font-family: Fontawesome;

font-size: 15px;

}

.widget_recent_entries li::before {

content: "\f040";

}

.widget_archive li::before {

margin-right: 5px;

content: "\f133";

}

.widget_pages li::before {

margin-right: 5px;

content: "\f016";

}

.widget_recent_comments li::before {

margin-right: 5px;

content: "\f0e5";

}

.widget_categories li::before {

margin-right: 5px;

content: "\f114";

}

 

#secondary select {

color: #414141;

}

 

 

/*--------------------------------------------------------------

# Content

--------------------------------------------------------------*/

 

 

/*--------------------------------------------------------------

## Posts and pages

--------------------------------------------------------------*/

 

.sticky {

display: block;

}

 

.hentry {

margin: 0;

padding: 60px;

background-color: #fff;

}

 

.updated:not(.published) {

display: none;

}

 

.single .byline,

.group-blog .byline {

display: inline;

}

 

.page-links {

clear: both;

margin: 0 0 1.5em;

}

.entry-title {

margin: 0 0 15px;

}

.single .entry-header,

.page .entry-header {

margin-bottom: 30px;

text-align: center;

}

.entry-title a {

color: #000;

}

.entry-title a:hover {

color: #23b6b6;

}

.grid-layout .entry-title {

font-size: 28px;

}

.post-meta,

.post-meta a {

color: #fff;

}

.entry-meta,

.entry-footer {

margin-bottom: 15px;

font-size: 12px;

}

.entry-footer {

clear: left;

margin-top: 15px;

}

.entry-meta,

.entry-meta a,

.entry-footer,

.entry-footer a {

color: #9d9d9d;

}

.entry-meta a:hover {

color: #23b6b6;

}

.posted-on,

.author {

margin-right: 8px;

}

.posted-on:after,

.author:after {

margin-left: 8px;

content: "/";

}

.read-more {

padding: 15px 30px 30px;

background-color: #23b6b6;

-webkit-transition: background-color 0.3s;

transition: background-color 0.3s;

}

.read-more:hover {

background-color: #17191b;

}

.read-more a {

position: relative;

z-index: 99;

color: #fff;

}

.single-thumb {

margin-bottom: 30px;

text-align: center;

}

.entry-thumb {

position: relative;

z-index: 9;

text-align: center;

}

.entry-thumb:after {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 0;

background-color: rgba(35, 182, 182, 0.4);

content: "";

-webkit-transition: height 0.4s;

transition: height 0.4s;

}

.entry-thumb:hover:after {

height: 100%;

}

.thumb-link {

position: absolute;

z-index: 99;

top: 40%;

left: 45%;

opacity: 0;

color: #fff;

font-size: 38px;

-webkit-transition: all 0.4s 0.3s;

transition: all 0.4s 0.3s;

}

.thumb-link-wrap {

float: left;

position: absolute;

z-index: 99;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.entry-thumb:hover .thumb-link {

opacity: 1;

}

 

.page-header {

margin: 0;

margin-top: -1px;

padding: 30px;

border: 0;

background-color: #17191b;

}

.page-header .page-title {

margin: 0;

color: #fff;

text-align: center;

}

.taxonomy-description {

margin: 15px 0 0;

text-align: center;

}

.archive .site-header,

.error404 .site-header {

margin-bottom: 0;

}

.error404 .page-content {

margin-top: 60px;

color: #fff;

text-align: center;

}

.archive.author {

margin: 0;

}

 

 

/*--------------------------------------------------------------

## Asides

--------------------------------------------------------------*/

 

.blog .format-aside .entry-title,

.archive .format-aside .entry-title {

display: none;

}

 

 

/*--------------------------------------------------------------

Comments

--------------------------------------------------------------*/

 

.comments-area {

margin-bottom: 60px;

}

.comments-title {

margin: 0;

padding: 30px;

border-bottom: 1px solid #ebebeb;

background-color: #fff;

font-size: 24px;

}

.comments-area ol {

list-style: none;

}

.comments-area ol {

padding: 0;

}

.comments-area .children {

padding-left: 20px;

}

 

.comment-author .avatar {

position: absolute;

}

.comment-author .fn,

.comment-metadata {

margin-left: 80px;

}

.comment-metadata {

margin-bottom: 30px;

font-size: 12px;

}

.comment-body {

margin-bottom: 15px;

padding: 30px;

border-bottom: 1px solid #ebebeb;

background-color: #fff;

}

.reply {

text-align: right;

}

.comment-reply-link {

padding: 5px;

background-color: #fff;

font-size: 12px;

-webkit-transition: all 0.4s;

transition: all 0.4s;

}

a.comment-reply-link {

text-decoration: none;

}

a.comment-reply-link:hover {

color: #000;

-webkit-box-shadow: 0 0 1px #505050;

box-shadow: 0 0 1px #505050;

}

.comments-area a.url {

text-decoration: underline;

}

.comment-metadata a,

.comments-area a.url {

color: #444;

}

 

.comment-respond {

margin-top: 60px;

}

.comment-form,

.comment-respond .comment-reply-title {

color: #fff;

}

.comment-form .form-submit {

margin-top: 30px;

}

 

 

/*--------------------------------------------------------------

# Infinite scroll

--------------------------------------------------------------*/

 

/* Globally hidden elements when Infinite Scroll is supported and in use. */

.infinite-scroll .posts-navigation,

/* Older / Newer Posts Navigation (always hidden) */

.infinite-scroll.neverending .site-footer {

/* Theme Footer (when set to scrolling) */

display: none;

}

 

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */

.infinity-end.neverending .site-footer {

display: block;

}

 

 

/*--------------------------------------------------------------

# Media

--------------------------------------------------------------*/

 

.page-content .wp-smiley,

.entry-content .wp-smiley,

.comment-content .wp-smiley {

margin-top: 0;

margin-bottom: 0;

padding: 0;

border: none;

}

 

/* Make sure embeds and iframes fit their containers. */

embed,

iframe,

object {

max-width: 100%;

}

img {

max-width: 100%;

height: auto;

}

img[class*="wp-image-"] {

margin-top: 15px;

margin-bottom: 15px;

}

 

 

/*--------------------------------------------------------------

## Captions

--------------------------------------------------------------*/

 

.wp-caption {

overflow: hidden;

position: relative;

max-width: 100%;

margin-top: 15px;

margin-bottom: 15px;

}

 

.wp-caption img[class*="wp-image-"] {

display: block;

margin: 0 auto;

}

 

.wp-caption-text {

padding: 10px;

font-size: 13px;

line-height: 15px;

}

 

.wp-caption:hover .wp-caption-text {

bottom: -200px;

}

 

 

/*--------------------------------------------------------------

## Galleries

--------------------------------------------------------------*/

 

.gallery {

margin-bottom: 30px;

}

 

.gallery-item {

display: inline-block;

position: relative;

width: 100%;

text-align: center;

vertical-align: top;

}

 

.gallery-columns-2 .gallery-item {

max-width: 50%;

}

 

.gallery-columns-3 .gallery-item {

max-width: 33.33%;

}

 

.gallery-columns-4 .gallery-item {

max-width: 25%;

}

 

.gallery-columns-5 .gallery-item {

max-width: 20%;

}

 

.gallery-columns-6 .gallery-item {

max-width: 16.66%;

}

 

.gallery-columns-7 .gallery-item {

max-width: 14.28%;

}

 

.gallery-columns-8 .gallery-item {

max-width: 12.5%;

}

 

.gallery-columns-9 .gallery-item {

max-width: 11.11%;

}

 

.gallery-caption {

display: block;

}

 

 

/*--------------------------------------------------------------

Social Menu

--------------------------------------------------------------*/

 

.social-navigation ul {

margin: 0;

padding: 0;

text-align: right;

}

.social-navigation li {

display: inline-block;

position: relative;

line-height: 1;

list-style: none;

}

.menu-social-container {

overflow: hidden;

}

.social-navigation li a {

display: block;

padding: 10px;

color: #fff;

text-decoration: none;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.social-navigation li a::before {

display: block;

font-family: FontAwesome;

font-size: 20px;

}

.social-navigation li a:hover {

color: #23b6b6;

}

.social-navigation li a[href*="twitter.com"]::before {

content: "\f099";

}

.social-navigation li a[href*="facebook.com"]::before {

content: "\f09a";

}

.social-navigation li a[href*="plus.google.com"]::before {

content: "\f0d5";

}

.social-navigation li a[href*="dribbble.com"]::before {

content: "\f17d";

}

.social-navigation li a[href*="pinterest.com"]::before {

content: "\f0d2";

}

.social-navigation li a[href*="youtube.com"]::before {

content: "\f167";

}

.social-navigation li a[href*="flickr.com"]::before {

content: "\f16e";

}

.social-navigation li a[href*="vimeo.com"]::before {

content: "\f194";

}

.social-navigation li a[href*="instagram.com"]::before {

content: "\f16d";

}

.social-navigation li a[href*="linkedin.com"]::before {

content: "\f0e1";

}

.social-navigation li a[href*="foursquare.com"]::before {

content: "\f180";

}

.social-navigation li a[href*="tumblr.com"]::before {

content: "\f173";

}

.social-navigation li a[href*="github.com"]::before {

content: "\f09b";

}

 

 

/*--------------------------------------------------------------

SVG

--------------------------------------------------------------*/

 

.svg-container {

position: absolute;

bottom: 0;

width: 100%;

height: 0;

padding-top: 7.93650794%;

}

svg {

position: absolute;

top: 0;

left: 0;

}

.nav-svg {

position: relative;

z-index: 11;

margin-bottom: -7.81%;

}

.meta-svg {

position: relative;

top: -1px;

width: 100%;

height: 0;

padding-top: 69.44444444%;

}

.header-svg {

margin-bottom: -2px;

}

.svg-block {

fill: #1c1c1c;

stroke: none;

}

 

.footer-svg {

position: relative;

margin-bottom: -2px;

}

.footer-svg.svg-block {

fill: #17191b;

}

.hentry .svg-container {

position: relative;

z-index: 11;

}

 

.hentry .post-svg {

margin-bottom: -7.74%;

}

.hentry .post-bottom-svg {

margin-top: -7.78%;

}

.single-post-svg {

position: relative;

margin-bottom: -1px;

 

fill: #fff !important;

}

.single-svg-bottom {

margin-top: -2px;

margin-bottom: 60px;

}

.svg-container.page-header-svg {

position: relative;

 

fill: #17191b;

}

.archive .svg-container.page-header-svg {

margin-top: -1px;

}

.grid-layout .hentry:nth-of-type(2) .post-svg {

margin-top: -7.98%;

}

.grid-layout .hentry:nth-of-type(3) .post-svg {

margin-top: -15.98%;

}

 

 

/*--------------------------------------------------------------

Structure

--------------------------------------------------------------*/

 

.site-content {

margin-bottom: 30px;

}

.site-header {

position: relative;

z-index: 10;

margin-bottom: 45px;

}

.site-branding {

padding: 150px 0;

text-align: center;

}

.site-logo {

width: 100%;

}

.show-title {

margin-bottom: 15px;

}

.site-title {

margin: 0 0 30px;

font-size: 82px;

}

.site-title a {

color: #f9f9f9;

}

.site-description {

color: #ddd;

font-size: 18px;

}

.overlay {

position: absolute;

z-index: -1;

top: 0;

width: 100%;

height: 100%;

opacity: 0.3;

background-color: #000;

}

.site-footer {

padding: 30px 0;

background-color: #17191b;

font-size: 14px;

}

.site-footer,

.site-footer a {

color: #8b8b8b;

}

.grid-layout .hentry {

width: 350px;

margin: 15px;

padding: 0;

background-color: transparent;

}

 

.post-inner {

padding: 30px;

background-color: #fff;

}

.post-inner.no-thumb {

padding: 60px 30px 30px;

}

 

 

/*--------------------------------------------------------------

Menu

--------------------------------------------------------------*/

 

.main-navigation {

display: none;

}

.slicknav_btn {

display: none;

}

.slicknav_menu  .slicknav_menutxt {

display: block;

float: left;

line-height: 1.188em;

}

.slicknav_menu .slicknav_icon {

float: left;

margin: 0.188em 0 0 0.438em;

}

.slicknav_menu .slicknav_no-text {

margin: 0;

}

.slicknav_menu .slicknav_icon-bar {

display: block;

width: 1.125em;

height: 0.125em;

border-radius: 1px;

-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

}

.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {

margin-top: 0.188em;

}

.slicknav_nav {

display: block !important;

clear: both;

}

.slicknav_nav ul,

.slicknav_nav li {

display: block;

}

.slicknav_nav li {

display: block;

padding: 5px;

border-bottom: 1px solid #222;

text-transform: uppercase;

}

.slicknav_nav li ul li {

text-transform: none;

}

.slicknav_nav li ul li:last-of-type {

border-bottom: 0;

}

.slicknav_nav .slicknav_arrow {

margin: 0 0 0 8px;

}

.slicknav_nav .slicknav_item {

cursor: pointer;

}

.slicknav_nav .slicknav_row {

display: block;

}

.slicknav_nav a {

display: block;

}

.slicknav_nav .slicknav_item a,

.slicknav_nav .slicknav_parent-link a {

display: inline;

}

.slicknav_brand {

float: left;

}

.slicknav_menu:before,

.slicknav_menu:after {

display: table;

content: " ";

}

.slicknav_menu:after {

clear: both;

}

 

/* IE6/7 support */

.slicknav_menu {

*zoom: 1;

}

.slicknav_menu {

-webkit-box-sizing: border-box;

box-sizing: border-box;

font-size: 16px;

}

.slicknav_menu * {

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.slicknav_nav li a {

-webkit-transition: all 0.4s;

transition: all 0.4s;

}

.slicknav_nav li:hover a {

margin-left: 10px;

}

.slicknav_nav {

margin: 0;

padding: 0;

color: #fff;

font-size: 0.875em;

}

.slicknav_nav,

.slicknav_nav ul {

overflow: hidden;

list-style: none;

}

.slicknav_nav ul {

margin: 0;

padding: 0;

}

.slicknav_nav ul ul {

margin-left: 10px;

}

.slicknav_nav .slicknav_row {

margin: 0;

padding: 5px 0;

}

.slicknav_nav a {

margin: 0;

padding: 5px 0;

text-decoration: none;

}

.slicknav_nav .slicknav_item a,

.slicknav_nav .slicknav_parent-link a {

margin: 0;

padding: 0;

}

.slicknav_nav .slicknav_txtnode {

margin-left: 15px;

}

.slicknav_brand {

height: 44px;

padding: 7px 12px;

color: #fff;

font-size: 18px;

line-height: 30px;

}

 

 

/*--------------------------------------------------------------

Top bar

--------------------------------------------------------------*/

 

.top-bar {

padding: 10px 15px;

text-align: right;

}

.top-bar .header-search,

.social-navigation {

display: inline-block;

vertical-align: middle;

}

.header-search .search-submit {

display: none;

}

.header-search {

margin-left: 10px;

}

.header-search .search-field {

padding: 5px 10px;

border-top: 0;

border-right: 0;

border-bottom-color: #6f6f6f;

border-left: 0;

border-radius: 0;

background-color: transparent;

font-size: 12px;

font-weight: 400;

}

.header-search .search-field,

.header-search .search-field:focus {

color: #fff;

}

.oblique-only-customizer {

display: none !important;

}

.grid-layout {

display: none;

}

 

 

/*--------------------------------------------------------------

 +Woocommerce

 +--------------------------------------------------------------*/

 

article.product {

margin: 0;

padding: 60px;

background-color: #fff;

}

 

article.product .entry-header {

margin-bottom: 30px;

text-align: center;

}

 

 

/*--------------------------------------------------------------

Responsive

--------------------------------------------------------------*/

 

@media only screen and (max-width: 1199px) {

.grid-layout .hentry {

width: 283px;

}

.single-post-svg {

margin-bottom: -1px;

}

}

@media only screen and (max-width: 1024px) {

.site-header {

background-attachment: scroll !important;

background-position: center !important;

}

}

@media only screen and (max-width: 991px) {

.grid-layout .hentry {

width: 330px;

}

.grid-layout .hentry:nth-of-type(3) .post-svg {

margin-top: 0;

}

.hentry .post-svg {

margin-left: -3px;

}

.site-title {

font-size: 60px !important;

}

}

@media only screen and (max-width: 767px) {

.grid-layout .hentry {

width: 100%;

max-width: 370px;

margin: 0 auto 30px;

}

.grid-layout .hentry:nth-of-type(2) .post-svg {

margin-top: 0;

}

.grid-layout {

width: 100%;

max-width: 370px;

margin: 0 auto;

}

.site-title {

font-size: 35px!important;

}

.site-description {

font-size: 16px;

}

.sidebar-toggle {

display: table;

position: relative;

left: 25px;

}

}

@media only screen and (max-width: 460px) {

.post-inner {

padding: 15px;

}

.hentry {

padding: 15px;

}

.entry-title {

font-size: 26px;

}

body {

font-size: 14px;

}

.nav-svg {

top: -1px;

}

.widget-area-visible {

width: 100%;

}

.sidebar-toggle {

position: relative;

left: 0;

}

.admin-bar .sidebar-toggle {

top: 0;

margin: 0 auto 15px;

}

.social-navigation ul {

text-align: center;

}

.content-wrapper {

padding: 0;

}

.top-bar {

text-align: center;

}

.site-main .post-navigation {

padding-right: 15px;

padding-left: 15px;

}

.comments-area {

padding-right: 15px;

padding-left: 15px;

}

}

 

The CSS code to be removed from your JotForm and not from WordPress. I have removed the CSS code from your form now and it should be displaying fine on the mobile devices.

Please check and let us know if the issue still persists. We will be happy to take a look again.