How to change the form alignment in mobile

  • Resolved mjunes

    (@mjunes)


    6 years, 2 months ago

    Hello again,

    I have set the form alignment to left by default. Is it possible to change the form alignment from left to top when viewed in mobiles? I see that the class left_aligned needs to change to top_aligned when the form is viewed from mobiles.

    Is there an easy way to achieve this?

    Thanks much

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter mjunes

    (@mjunes)

    I have achieved it with the below code:

    <script>
jQuery(document).ready(function($) {
  var alterClass = function() {
    var ww = document.body.clientWidth;
    if (ww < 710) {
      $('.left_aligned').addClass('top_aligned');
      $('.left_aligned').removeClass('left_aligned');
    };
   };
  $(window).resize(function(){
    alterClass();
  });
  alterClass();
});
</script>

    Please let me know if there is a better alternative.

    Plugin Author codepeople

    (@codepeople)

    Hello @mjunes,

    Please, look the solution in the “/wp-content/plugins/calculated-fields-form/css/stylepublic.css” file of the plugin:

    
@media print, screen and (min-width: 24em) {
	#fbuilder .left_aligned .fields label:not(:empty){float:left;width:35%;}
	#fbuilder .left_aligned .fields label:not(:empty) + .dfield{float:left;width:65%;}
	#fbuilder .right_aligned .fields label:not(:empty){float:left;width:35%;text-align:right;padding:3px 3px 0px 0px;}
	#fbuilder .right_aligned .fields label:not(:empty) + .dfield{float:left;width:65%;}
}

    The fields are aligned at left only with large screens (or viewposts). You don’t need increase the form’s complexity with javascript.

    Best regards.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change the form alignment in mobile’ is closed to new replies.