In the course of working with different Weebly website and different Weebly themes, we have come across a number situations where the texts on Weebly buttons flow beyond the button width, and in many cases it flows beyond the content area of a page.
This issue presents website users with very poor browsing experience, particularly in situations where users access the website with small screen devices such as tablets, mobile phones, or small laptops/notebook computers, etc.
In this tutorial, we will show you how to fix the Weebly issue where a button texts flows beyond the content area or the button width.
The screenshot below shows an example of a button with long texts that flow beyond the content area and page width.
How To Fix Weebly Button Texts Flowing Beyond Content Area or Page Width
METHOD #1:
The button texts overflow is a CSS issue that can be fixed by simply adding a line of code to your Weebly theme CCS.
Time needed: 5 minutes
How To Fix Weebly Button Texts Flowing Beyond Content Area or Page Width
- Step 1 – Copy the below code
Copy the short code below to paste into your Weebly theme file or header code.
- Step 2 – Access theme Files
On your Weebly website editor, click Theme, click Edit HTML/CSS and wait for the theme files to load.
- Step 3 – Paste the Code
Scroll down to STYLES, click the main.less code editor (or main_style.css if using an old Weebly theme). Make a new line at the bottom of the code editor and paste the code you copied in ‘Step 1’ above..
- Step 4 – Click Save.
If this is your first time editing the theme, you might be prompted to give the theme a name.
That’s it!
You will notice that the button texts break into two or more lines (depending on the length of the texts) and the button is contained within the its content area or page width… no more overflowing.
.wsite-button-inner {
white-space: normal !important;
}Not sure where to paste the button code or afraid to edit theme source code?
If you are uncertain how or where to paste the code above or you are afraid to edit the theme source code, you can add the code elsewhere on your Weebly website to achieve the same result.
The below instructions will show you how and where to paste the code… but the result will only be noticeable on the live website, which means you will see the result after you publish the website.
If adding the code directly into the theme file (as explained in METHOD #1 above) you will notice the button issue resolved in the editor as soon as you save the changes… that is, both on the website editor and live website.
But if adding the code using METHOD #2 below, the button issue will still be seen on the website editor (back-end) but will be resolved on the live/published website. This is because adding a code directly into a theme file will take effect both on the website editor and the live website, but adding a code outside a theme file (such as page header or site header code injections), the effect will be seen when viewing the live website.
How to Fix The Weebly Button Texts Overflow via Header Code Injection
METHOD #2
Step A – copy below code
<style>
.wsite-button-inner {
white-space: normal !important;
}
</style>Step B – on the Weebly website editor, click Settings , click SEO, scroll to Header Code
Step C – paste the code into Header Code and click Save (see below screenshot)
Step D – publish the website when you are ready to see the button issue resolved.
That’s it!
