when viewing my site on a mobile device, when a user adds content the field doesn't fit to the width of the window. It extends out like it is a static field instead of responsive. Any idea how to fix this?

Comments

lastar84’s picture

This would likely be controlled by your stylesheets: responsive.css and style.css in the theme folder.

Or, if you have set permissions for users to view the administration theme (in my case, I'm using the default "Seven" theme for administering page content), that theme is not fully responsive and will not behave exactly as you want. The default permission, however, is for users to add content in the main theme.

Therefore, assuming your users are adding content within the "Best Responsive" theme, look for the input size setting that Drupal automatically adds to fields. For example, the title field typically is set to size="60" (essentially 60 characters wide). On smaller screens, that will hang out off the page. To fix this, you'll need to figure out the names of the styles that Drupal automatically added to your input fields. Then add your own style setting to the responsive CSS and override those fields with a percentage width; try 95% and adjust accordingly.

borgeous’s picture

lastar84's response fixed the issue.

toribiob’s picture

Based on lastar84's response i added these lines to my custom css file in order to shorten the input fileds with the default size of 60 characters on mobile devices:

@media screen and (max-width: 767px) {
 	input[size~="60"] {
		width: 95%;
	}
}