• Skip to primary navigation
  • Skip to main content

RocketGeek

Home of WP-Members, The Original WordPress Membership Plugin

  • WordPress Plugins
    • WP-Members
      • FAQs
      • Quick Start
      • Documentation
      • Extensions
    • Advanced Options
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Download Protect
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Invite Codes
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • MailChimp Integration
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • PayPal Subscriptions
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Salesforce Web-to-Lead
    • Security
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Text Editor
      • Purchase the Plugin
      • Get the Pro Bundle
    • User List
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • User Tracking
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Memberships for WooCommerce
    • WordPass
  • Blog
    • Basics
    • Tips and Tricks
    • Filters
    • Actions
    • Code Snippets
    • Shortcodes
    • Design
    • Release Announcements
  • Store
    • Cart
    • Checkout
  • Contact
  • Log In
  • Show Search
Hide Search
Home » Design » Customizing form CSS: Setting maximum form width

Customizing form CSS: Setting maximum form width

Chad Butler · Jan 12, 2015 ·

This article is provided free. Find out how you can get full access to premium content, including how-to articles and support forums, as well as priority email support and member exclusive plugin extensions..

 

If you use a theme that has a fairly wide main content area and couple that with one of the plugin’s default stylesheets that uses a percentage width for the form, you may find it useful to add a property definition of max-width to set maximum width for the forms.  

If you take a look at my recent post on adjusting form floated elements, you’ll see a form that uses a fairly wide content area and how this spreads out the form.  This example will give that a maximum width.

The stylesheet that was being used on that form was/is generic-rigid.css.  That particular stylesheet sets the width of the login and registration forms at 100% of the content area they are placed by setting this definition for the div wrappers for those forms (wpmem_login and wpmem_reg).

We can add a property definition for “max-width” and in this example set that to 500 pixels to tighten up the form a little bit.  This will keep things responsive, but will also give us a maximum width if things get too wide.

5

I use the FireFox developer tools to do live testing of CSS changes in the browser.  This example shows what that looks like.  But there are other similar tools available.  Either way, these type of tools make testing possible CSS changes much easier because you can see how it affects the layout in real time.

Once you’ve tested out a change like this, you need to apply it.  There are a couple of approaches to that.

First, some people just edit the stylesheet in the plugin directly.  I don’t recommend that as such because when you update the plugin, that file will be overwritten.

A better alternative to that is to take that stylesheet and make a copy of it.  Edit the copy and save that somewhere outside of the plugin (I usually use the theme folder).  Then map that in the custom stylesheet option in the plugin’s options tab.  See “Customizing Forms” in the User Guide for more information on doing this.

 

Design css, design, forms, layout, tips

Ready to get started?

Join Today!

© 2025 · butlerblog.com · RocketGeek is built using WordPress, WP-Members, and the Genesis Framework

  • butlerblog.com
  • WP-Members Support Subscription
  • Terms of Service
  • Privacy Policy
  • Refund Policy