Skip to main content
May 18, 2018
Question

Responsive CSS on Form

  • May 18, 2018
  • 1 reply
  • 1783 views

Hi all,

Hope you are well.

Is there a way to make form mobile responsive?

I put padding on mktohmtltext to have indent it looks perfect on desktop but not in mobile.

thanks,

Jas

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Dave_Roberts
Level 10
June 28, 2018

Hey Jas-

You'd need to add some responsive styles to the Custom CSS on the form (pg 2 in the editor, little purple gear icon). It depends on how you've got your forms styled and how you set this padding, but assuming that you didnt' have anything in the Custom CSS already, you could add padding to the .mktoHtmlText element "responsively" by using a media query to check the device size.

You might try something like this:

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

.mktoHtmlText {padding: 0px !important;}

}

This will override any padding on your htmlText elements when the screen is mobile-sized (up to a max of 480px). Above 480px, you'll see whatever padding you setup in the editor.

Another way to accomplish this would kind of be the opposite or "mobile-first" approach where you only added the padding to the htmlText for screens larger than 480px rather than zeroing it out for mobile.

This approach would look like this:

@media screen and (min-width:480px) {

.mktoHtmlText {padding: 0px 15px !important;}

}

In this way, you wouldn't need to set the padding on the element itself on the form, it'd just get that padding when the screen was larger than mobile and otherwise show the default padding for .mktoHtmlText (which I believe is 0).

Hope this helps, let me know if you've got any questions on the media query bit.