Full Width Button

Does BeTheme allow Full Width Buttons (that take up the width of the container)? In the button shortcode, I only see 1 and 0 for large or not. Is there a full width option?

Comments

  • No, we do not have such option. But if you will send us url to page where you want to make buttons full width, we can check if it's possible.
  • Certainly. Here is the link:

    http://dev.thinkreliability.com/root-cause-analysis/education-for-root-cause-analysis/attendee-download-and-resource-center/

    I'd like the buttons in the body of the page to be full width of their containers so they'll all be the same size, and I'd like to get rid of the padding below that that is making the items with not enough lines of text have too much space between them and the next item:
  • Ok. So to make these buttons 100% width, please use below css:
    #Content a.button { width: 100% !important; }
    However, we do not know which padding you mean exactly. Would be great if you can show us on screenshot which padding you mean.
  • Certainly.


    An example of the buttons causing too much padding can be seen in the row "Broken Glass Map". Notice how the space between that row's content, and the row under it entitle "Evidence and Possible Solutions Cause Map" has more space than all the other rows above it. 

    The only thing I can attribute this too is that the button is adding a minimum padding below it, and if there's text to the left of the button is not enough lines to extend past the buttons bottom padding, the button's bottom padding creates more space than other rows that have more lines of text.

    For example, if the "Broken Glass Map" row had 3 lines of text top the left of the button instead of 2, the space between it and the "Evidence and Possible Solutions Cause Map" would be the same as the other rows above it. But because there are only 2 lines of text to the left of the button in that row, the apparent padding below the button is extending below the normal padding below <p>content</p>, so it looks like too much space compared to the rows above it.


    I hope I am being clear. Please let me know.
  • Ok, thanks for the clarification. You're right. We gave the default margin for buttons because it's necessary. However, if you want to remove this margin for buttons, please use below css:
    a.button, a.tp-button, button, input[type="submit"], input[type="reset"], input[type="button"] { margin-bottom: 0 !important; }
    Next time, you can find such css yourself with the tools like Firebug. We suggest to look at http://themes.muffingroup.com/betheme/documentation/#theme-customizations where we explained how it works.
Sign In or Register to comment.