Line break on buttons

All Quick 'n Easy Web Builder support issues that are not covered in the forums below.
Post Reply
alex4orly
Posts: 193
Joined: Thu Jul 23, 2020 9:34 am

Line break on buttons

Post by alex4orly »

I have two sites that one is a copy of the other, just one is in English and the other in Hebrew
The English site, in a Mobile phone - if the button text is made up of two words, it breaks, the Hebrew site however does not.

Please have a look at this side by side images : https://ourvilla.net.au/bothsites.jpg

The Hebrew site is here : https://squadron-125.org.il/home.html
The English site is here : https://ourvilla.net.au/frontpage.php

Any idea why? How can this be fixed?

Thanks
User avatar
Pablo
Site Admin
Posts: 3406
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Line break on buttons

Post by Pablo »

How can this be fixed?
What do you mean by 'fixed'?
Which behavior do you need?

This may be helpful:
https://www.w3schools.com/cssref/pr_tex ... -space.asp
alex4orly
Posts: 193
Joined: Thu Jul 23, 2020 9:34 am

Re: Line break on buttons

Post by alex4orly »

Well, in the link to the JPG file, I show side by side
On the right image, the website that the ward warp works by itself
On the left side, it does not

I didn't do any css script to make it happen, nor do I know where to insert such script.

So it seems, maybe? the Hebrew is NOT doing it automatically

Any thoughts?

Thanks
User avatar
Pablo
Site Admin
Posts: 3406
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Line break on buttons

Post by Pablo »

I am not familiar with Hebrew, so I cannot tell you extacly how it works, but the suggested wordwrap css may solve your problem.
alex4orly
Posts: 193
Joined: Thu Jul 23, 2020 9:34 am

Re: Line break on buttons

Post by alex4orly »

Ok, happy to try, but where to insert that?

Good night
User avatar
Pablo
Site Admin
Posts: 3406
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Line break on buttons

Post by Pablo »

1. Add an HTML object
2. Set the Type to 'Between head tags'
2. Copy/paste this code

Code: Select all

<style>
#Button1,
#Button2,
#Button3
{
   white-space: break-spaces;
}
</style>
alex4orly
Posts: 193
Joined: Thu Jul 23, 2020 9:34 am

Re: Line break on buttons

Post by alex4orly »

Not clear where do set Type 'Between Head tags'
So, I just created the HTML object and added that code, it WORKS, almost 100%

1) The site is here : squadron-125.org.il/home.html
2) How does it "Know" not to break the title on desktop or tablet?
3) Whay is the 2nd button on the 2nd row not working? The title remains on one line

Thanks again
User avatar
Pablo
Site Admin
Posts: 3406
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Line break on buttons

Post by Pablo »

Not clear where do set Type 'Between Head tags'
You can set the type in the properties of the HTML object
How does it "Know" not to break the title on desktop or tablet?
If the object is wide enough then the text will not break. This is standard HTML functionality.
Why is the 2nd button on the 2nd row not working? The title remains on one line
It seem to work correct for me.
However, the text is a smaller than the other text so the the point where it breaks is lower.
alex4orly
Posts: 193
Joined: Thu Jul 23, 2020 9:34 am

Re: Line break on buttons

Post by alex4orly »

Many thanks
Clear now
Post Reply