Support

Home Forums Event Espresso Premium Text does not fit on button

Text does not fit on button

Posted: August 25, 2014 at 12:07 pm


DirComms

August 25, 2014 at 12:07 pm

This is probably an easy one… On several buttons in the registratino process, the text gets cutoff (doesn’t fit on button). For exampel, the “Enter Attendee Information” has the last part of Information cut off. How do I fix the button size? (I’d prefer not to fix the text size, but I realize that may be the easier work-around)


Lorenzo Orlando Caum

  • Support Staff

August 25, 2014 at 6:25 pm

Hello Oren,

You can inspect any element on a page using a free tool like Chrome Developer Tools (available with Google Chrome) or Firebug (available as a web browser extension).

This will show you the CSS that is handling the styling including the file and line number. Then you can add new styling to your child theme’s stylesheet or through a plugin like Reaktiv CSS builder or My Custom CSS.

Is a link available to the page?

It doesn’t appear cutoff on a default install so there may be some other CSS adding some extra styling.


Lorenzo


DirComms

August 26, 2014 at 6:11 am

Hi,
I searched around a bit but could not find the proper file to modify to get the action I wanted. The Developer Tools shows a path in the hierarchy and not an actual file name. Can you point me to the specific files I should modify?

Oren


Dean

August 26, 2014 at 6:14 am

Hi Oren,

It depends on the location. Can you provide a link to a page with the problem on it and we can tell from there exactly what needs to be done.

Also, is this on a standard size monitor or a mobile device?


DirComms

August 26, 2014 at 6:38 am

Here is the link:
http://www.incose-cc.org/espresso-registration/?regevent_action=load_checkout_page
Text says: “Confirm and go to payment page” but “page” is cut off.


Dean

August 26, 2014 at 6:58 am

Hi,

Thanks for that. The theme is applying a styling rule that is affecting the input. You could try adding this to your themes style.css file or a plugin like My Custom CSS:

input.submit.btn_event_form_submit.ui-priority-primary.ui-state-default.ui-state-hover.ui-state-focus.ui-corner-all {
	width:inherit;
}

It worked in testing, but if it isn’t working, try changing the inherit to between 60% and 100%.


DirComms

August 26, 2014 at 7:10 am

Whatever that magic incantation is, it worked! I’m not much of a web developer but got “stuck” doing this anyway. Will that solve the problem throughout for text buttons?

Oren


Josh

  • Support Staff

August 26, 2014 at 8:04 am

Hi Oren,

The code that Dean posted should apply to most buttons, but you’ll want to confirm this.

The support post ‘Text does not fit on button’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso