I order to get nicely aligned set for all buttons white-space:pre
then button texts don’t go to several rows.
Have you set for them float:left or float:right.
I don’t have Access to the css of the button.
Only custome css for other part of my website.
You can redefine the CSS for the button using custom css.
bbp style pack has some predefine CSS, but you can override them.
The button has subscription-toggle class. It has as parent element DIV with classes bsp-center bsp-one-third
div.bsp-one-third .subscription-toggle {white-space:pre; float:left;display:block} should force texts into single row and also float the button into several rows, if in one row there is not enough space for all.
-
This reply was modified 7 years, 2 months ago by
tapiohuuhaa.
so if i follow you i have to put “div.bsp-one-third .subscription-toggle {white-space:pre; float:left;display:block} ” in the custom css part and it will solve my issue ?
at least it prevents titles of the buttons going several rows. And if there is not enough space to put more than one button to the same row, it puts them in the next row.
hi. yes it works but the button is not responsive ! he is broken on mobile device
see here an example
New example button not responsive
I tested my own site the create new button with a mobile phone and it worked ok.In most cases when you can see button but it doesn’t work, the reason is stack order. some element, which has higher z-index prevents working such links, which remain under the element, which has higher z-index.
Thanks for the response. But i don’t understand what is stack order or z-index, and the most important, how to resolve the issue.
Where i need to go ?
Apparently you can set custom CSS for the site because you can use plugins.
stack order and z-index relate with html element layers. You can with position put elements over each others. Then elements works like layers. Stack is at least two elements, which overlap each others. Z-index controls, which element should be over another element. Higher z-index means the element must put higher in the element stack.
Ok. Thanks.
But i don’t understand the relationship with my broken button.
Can you explain me which css code i need to put for having my button running well ?
I’m not a developer so that why i’m asking you that
You apparently have not yet set white-space:pre and other CSS, which I proposed because the text goes to several rows.
Try for blue buttons float:left; clear: all and to the black button float:right;
Be sure to have height and top & bottom margins in order to get nice result. You have missing margins because black button has no top margin.
If buttons overlapp, it might cause misbehavior.
try
.bsp-center {float:left; clear: all; margin: 3px 0;height:30px;}
.bsp-center a {white-space; pre;} /* note – this for the a element! */
HI.I have put your code into the settings of the plugin but it do not work. My button is still broken when you can see here
https://imgur.com/gallery/9FMqyEN (on mobile devices) https://imgur.com/mOug56Y (on desktop)
and here the code i put in the settings.
View post on imgur.com
I Can’t choose which button i want to be affected by the change.
I don’t undertand, why it doesn’t work.
With white-space:pre I get in my own site text into single line.
Could give an example/image of what you’re doing for being sure we talk about the same subject ?
Also maybe you or the plugin developer can try to go to my admin panel for resolve the issue ?
https://aijaa.com/iOHElg
from my site – those work ok.
