Form not displaying on mobile device in portrait view

Support
#1

I am having a problem getting my form on the Donate page to display correctly in portrait view on a mobile device (cell phone). Please help!

#2

Hi there,

Please add a class to the text element that contains the form then add this code in the custom CSS (assuming that the class you have added to the element is no-padding-mobile):

@media (max-width: 480px) {
    .no-padding-mobile {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

Hope this helps.

#3

I am still having the same problem. In portrait view, there is only one word per line and the fields are only one character long as shown below.

Your
First
Name
followed
by
Your
Last
Name
(required)
[]

Your
Email
(required)
[]

#4

Hi there,

I checked the donate page and the problem seems to be the style that you added in the Text Element which contains the form. In the style you have a padding left and right with 110 pixels:

That is not a correct way to have the padding for responsive views, it reduces the space available for the form in the mobile view:

It is better to use a percentage for the value of the padding. So I changed the style for you and used 10% padding left and right and now it shows better on mobile devices.

Thank you.

#5

Hello There,

I have checked your page and this issue is happening because of the 110 pixels padding for the left and right of the text element. To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
  #x-section-4 .x-text {
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

Hope this helps. Please let us know how it goes.

#6

Just to certain, do I add this under Style for this page in Cornerstone. I currently have the following styling for this page.

background-color: #dddddd; text-align: center; padding-top: 30px; padding-bottom: 30px; padding-left: 10%; padding-right: 10%; margin-left: 50px; border-radius: 20px;

I apologize but I don’t see a Settings tab in Cornerstone. Please point me in the right direction.

#7

Hello There,

The css and other settings tab can be found in the lower left panel in your browser.

I went ahead and added the css. Please check your site now.

#8

It’s still not displaying correctly on a mobile device in portrait mode. However, it does display nicely in landscape mode. Isn’t it supposed to display in portrait as well?

#9

Hi there,

I have just checked it on mobile and it displays fine on landscape and portrait mode:

Please try to clear your phone’s cache or load the page in incognito mode.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.