How do I create equal width columns?

[riinabodyart]

Hi,

I tried asking for help in Weebly support chat, but I didn't get a proper reply. Basically just "you just need to try yourself".

So can someone help me - how do I create equal width columns?

Basically I have a full-width page (Birdseye theme). I want this one section on my home page to not be full width. So I have 5 columns, in which 3 in the middle have content and two side ones (left and right) are empty so that there is some space on the sides of the page. When I add the spacer columns to the sides, Weebly automatically squishes the 3 content columns very narrow. So I want to make them wider and the side columns narrower. But when I start to narrow them down, the size of the 3 middle columns change completely, they become all different sizes and after that, it's a mess. 

The empty side columns are different width and the 3 in the middle as well. I don't know to make sure they are centred and how to get them the equal width. There are no rulers so that I could see the pixel sizes and the editor quidelines don't really help in this. So what do I do? I can't trust my eyes only.

HELP? Thank you!

[riinabodyart]

Here's a screeshot. So the how do I make the sides narrower and at the same time make sure the middle ones are a) the same width with each other and b) centered in the page?

[Bernadette3]

The first thing you will want to make sure to do is upload the images as the same size. This will set the width of each column. Any text within the same column should stay within the parameters. If you upload an image and resize it in the editor, you will probably run into some frustration. 😕 Everything looks very centered and equal the way you have it right now, so I think you are on the right track!  

You can also check out some apps in the App Center: https://www.weebly.com/app-center/search/column

[riinabodyart]

Yes in that screenshot they look equal, but if I then try to make the sides narrower (the empty columns) it all goew wonky and the three equal columns are no longer equal. The images are the same size (600x600px) so that is not the problem. The problem is I don't know how to control the size of the empty columns. How is that done?

[Adam7]

It might be easier to do something like this:

1. Add a spacer to a page, then drag a new spacer element next to it to create columns.

2. Add additional spacers to the right or left so you have however many columns you need.

3. Add your images into each column

4. Delete the spacer elements.

[MelissaO]

Hello - I'm trying to do this on my page. I have embedded videos and currently have two columns. No matter how I arrange the videos, I can't get three columns of equal size videos. I end up with 1 normal size and 2 small videos.  I've tried adding the spacer and it just does the same thing. I'm sure I'm doing something wrong but can't figure out what.  The videos are all embedded at the same size. I'd appreciate any suggestions.  Thank you! 

[Adam7 · Accepted solution]

One thing you could try is this, @MelissaO:

Add a new page, and click the button to add a new layout. Choose one that has content in three columns, then add your videos to each column. Next, remove all of the default content so you just have the columns with your videos. Finally, copy the whole columns element over to the page that you want your videos on.

[MelissaO]

Thank you! It looks like this will work! Never thought of that.  

[Adam7]

You're welcome! It's a bit of a roundabout way to do it, but glad to hear that got you what you needed.

[Homilit]

This sounds great unless you have one column with text and one with imagery.  How do you get these to come out evenly.  They'll look even on weebly, but on the actual webpage, I can't get it to come out evenly despite hours of frustration.  Help?

[Adam7]

I would do it like this:

1. Drag a spacer to the page of your site

2. Drag another spacer element into a column to the left or right of that

3. Add a text element under the spacer in one column, then an image element under the spacer in the other column

4. Delete the spacer elements

[Katina]

I just found this as I had the same problem.   When you click on the blue line, hold the Shift key down and it will resize!  Yay!