Contact form does not fit on mobile

rkirt · Member · Oct 20, 2015 at 8:47 pm
Copy link

Add topic to favorites
Is there any css that will help get a contact form to fit on mobile?

My theme claims to mobile-friendly but it is not.

Thanks!

The blog I need help with is: (visible only to logged in users)
timethief · Member · Oct 20, 2015 at 8:52 pm
Copy link
The mobile ready theme is default theme offered to those who choose to use old, non-responsive themes. Know that it’s a completely different theme that you do not need to enable at all, if your theme is listed as a responsive layout theme here https://theme.wordpress.com/themes/features/responsive-layout/

A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

When we use a responsive theme we disable the mobile theme. Go to > Appearance > Mobile and disable the mobile theme

You can read more in the support docs at https://en.support.wordpress.com/themes/mobile-themes/

You can test your site at this link https://www.google.com/webmasters/tools/mobile-friendly/
timethief · Member · Oct 20, 2015 at 8:55 pm
Copy link
CSS editing is theme specific editing. Volunteers cannot help with this issue as we cannot view private blogs and have no idea which theme you are referring to. if you do not wish to make the blog visibility Public then type modlook into the sidebar tags on this thread for Staff help. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Then please subscribe to this thread so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.
rkirt · Member · Oct 20, 2015 at 9:04 pm
Copy link
I continue to appreciate your answers but it seems like that does not help me with my problem.

I have a responsive theme (baskerville) but it will not show my entire contact form on mobile.
rkirt · Member · Oct 20, 2015 at 9:06 pm
Copy link
Forgot I set it to private. Thanks!
timethief · Member · Oct 20, 2015 at 9:16 pm
Copy link
Are you using the wordpress app?

This is the link for the iOs forum for the WordPress app http://ios.forums.wordpress.org/ so you can post there and make our WordPress developers aware of your issue. http://ios.forums.wordpress.org/forum/how-to-and-troubleshooting

For androids you need to inquire over at http://android.forums.wordpress.org/

If you don’t have a username account at WordPress.ORG click http://wordpress.org/support/ and register one on the top right hand corner of the page that opens, so you can post to the support forums there and make our developers aware of the issue.
rkirt · Member · Oct 20, 2015 at 9:20 pm
Copy link
I am not.

I am on wordpress.com
timethief · Member · Oct 20, 2015 at 9:24 pm
Copy link
Yes I know you are referring to http://hoodinsuranceagency.com/ and I can see the results of display on different devices here http://www.responsinator.com/?url=hoodinsuranceagency.com%2F Please be patient while waiting for help with CSS editing.
rkirt · Member · Oct 20, 2015 at 10:55 pm
Copy link
Thought I fixed it but then ran into another problem

After I save my style sheet that contains:
```
@media screen and (max-width:1000px) {
.contact-form {
 width: 200px
}
```
It ends up only showing up like this:

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

the sheet just removes the:
```
.contact-form {
 width: 200px
}
```
Am I not allowed to do something here?
timethief · Member · Oct 20, 2015 at 11:07 pm
Copy link
Staff have a considerable backlog and sill respond to your CSS editing issue as soon as they can. Please be patient while waiting.
g471n · Member · Oct 21, 2015 at 4:24 am
Copy link
Hi zachdoug32

You are missing a closing bracket, which is probably causing the problem. Your code should look like this:
```
@media screen and (max-width: 1000px) {
	.contact-form {
		width: 200px
	}
}
```
ehtis · Staff · Oct 21, 2015 at 5:50 am
Copy link
I just went through this and the problematic devices seems to be iPhone 4 and 5, with a maximum width of around 350px. (Also, the above code has a missing semicolon.)

Instead of going with a broad 1000px, I suggest you go with max-width: 350px like this:
```
@media screen and (max-width: 350px) {
    .contact-form {
        width: 200px;
    }
}
```
In case you feel it’s not sufficient, you can increase the max-width criteria.
supernovia · Staff · Oct 23, 2015 at 5:36 pm
Copy link
Hi @zachdoug32, it should fit. Looks like you’ve added some extra floating divs though which could be affecting its responsiveness. It also looks like you’re reworking this right now, so I’ll let you do that. Let us know if you need more help!

No items found.