Website graphics are distorted or "messed up", spacing is off, text is off, images are broken up

Problem: Website appears to be distorted, the spacing is off, text is very large or abnormally large, images or graphics are broken up.

Cause: There are a few causes for this type of behavior, including edits made to a home page causing increased spacing, or the text setting of the browser being incorrect, long worded menu items, excessive menu items, e.t.c.

Solution: There are a few solutions to try to correct the problem.

Checking the Text Size Setting

  1. Make sure the text size in the browser is default.
  2. To check this, in your web browser go to View > Text Size > Medium.
  3. Check your website to see if the problem is corrected. If not continue.

Checking the Menu Items

  1. Make sure none of your menu items are too long.
  2. Basically if you have any menu items which are longer then the actual spacing for the navigation menu, this could cause the template to extend and become distorted.
  3. To correct this, login to your website admin.
  4. Click on the Website Content.
  5. Select the page from the drop down menu, either Default Pages or Custom pages depending on the page type.
  6. Click Edit.
  7. You will see the Page Name (Display Name).
  8. It is best to rename the item to something shorter. If you NEED to have a long name, try inserting a <br> to create a break in the name, for example:

    Original Text: Find Out More Information Here
    Recommended Text: Find More Info Here
    Alternative: Find More<br>Information Here
  9. Click Save Changes.
  10. Check your website to see if the problem is corrected. If it is not a menu item that is too long, it could be a category name.... to check this proceed.
  11. Return to the Admin Main Menu.
  12. Click on Navigation Menu.
  13. Click on View/Edit Categories
  14. Check your categories and rename or adjust as necessary.
  15. Check your website to see if the problem is corrected.

Checking the Content

  1. If the previous items are not the cause of your distorted website, then it could be caused by custom content you added to the website. If you used excessive spaces to seperate or position items, this could cause a web page to become distorted.
  2. Another cause could be tables, if you copied and pasted content from another source which has tables, images or other components wider then the content area of the website.
  3. You can try removing or resize extra large items.
  4. Try removing any excessive spacing you created with the space bar when editing your content.
  5. Try modiying the size/width of the table. To do this, right click on the table (usually light grey boxes appear in the editor where the table exists).
  6. Click Edit Table.
  7. A new window will pop up. Click the Table tab (See below sample image).
  8. Enter 100% for the Table Width.
  9. Click Apply.

Feedback and Knowledge Base