SiteBuilder: image and panel widget alignment problem

  • 1
  • Problem
  • Updated 5 years ago
  • Not a Problem
Hello All: I created a test website to review SiteBuilder features and functions, and picked a template with three columns. I added 'panel widgets' with text and images, plus image widgets -- and carefully aligned each element, with adjustments to external and internal margins etc.

When I published the site, I found that the right side of panels and images had shifted -- nothing was aligned. Vertical spacing in SiteBuilder also disappeared. (A screen cap is attached.)

After some fiddling with margins and testing in different browsers, I found that adding a 10px margin to the right side of panel widgets fixed the alignment problem. Screen caps of the before-and-after are attached.

This does make text alignment a challenge in SiteBuilder. What you see in SiteBuilder is not necessarily what-you-get when the site is published. You may need to edit the HTML and add
line breaks.

The Yola dev team should take a look at this annoying bug.

I hope this is helpful.

Mark Hays

Photo of markallenhays

markallenhays

  • 24 Posts
  • 4 Reply Likes
  • frustrated

Posted 5 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Mark

I've gone into your Yola Sitebuilder to investigate. I have checked your home page where I can find the elements displayed in your screenshots above, and for which you chose a 3-column layout.

At the moment you will need to add a margin of 10px to the Custom Panels in the 1st and 2nd row, however not for the 3rd row. This is because the width of the image elements you added to the first two columns are exceeding the column width of your layout (and there are no images in your 3rd row). This makes the whole column scheme shift to right, so that the last column actually overlaps the body area of your Style on the right-hand side.

You can check if your elements exceed the column width by activating the Widget Borders. To do this, please open your Widget Menu, and click on the Settings icon at the top. Check the box next to "Show widget borders". If all your elements fit the column width, you shouldn't need to apply a right margin to your Custom Panel Widgets.

Working with manually adjustable widths is always a bit of trying and checking. I've created a test page on your website, but don't worry, it's neither in your navigation nor has your site been republished, and you can delete this test page at any time yourself ;-).

What I did to achieve the result on the test page which you can see in Preview: I first added the picture to one column and made it much smaller by dragging the red square. Then I added the Custom Panel below it, set the margins to 0, and checked the result in Preview. Please note that only Preview mode will give you an exact picture of what your live site will look like. Then I went back to the Workview and adjusted the picture until it aligned with the Custom Panel in Preview.

If you find this laborious, you can also go and find out the exact width your pictures need to fit into one column of the 3-column layout for this Style. To do this, please follow these steps:
  1. First add a Custom Panel Widget to your very left column.

  2. Set all its margins to 0.

  3. Drag and drop a Text Widget onto the Custom Panel, and add a sample text onto it.

  4. Edit your image with an image editing tool, and choose two different widths which may align with the Custom Panel.

  5. Upload these images and add them above the Custom Panel Widget, using the Picture Widget. You may want to play with the alignment of the Picture itself and set it to "center".

Don't use the red square for manually adjustment, but go on testing differently sized images until you have found the right width to align with your Custom Panel. Then edit all further pictures the same way.