Home>Support>Row heights uneven

Row heights uneven

Hello, I’m having a problem with a Page Builder Price Table.

I have a table with three columns: package 1, package 2, package 3.

Each package has various features that match they are things I could make a fourth column and put ticks for but choose to write out as text so that when seen on a mobile the full text of what is in a given package is evident.

Each package also has various things that don’t match. These aren’t things I could put a cross for because they are different.

I’m a wedding photographer so my example might be:

Package 1 has coverage of 5 hours, Package 2 has coverage of 10 hours, Package 3 has coverage of 10 hours.
Package 1 has a USB, Package 2 has a USB, Package 3 has a USB.
Package 1 has no album, Package 2 has an album and it is described, Package 3 has a bigger album and it is described.
Package 1 has no parent books, Package 2 has no parent books, Package 3 has 2 parent books.

You can see that these are all different and yet I could read through those four rows to compare the three packages.

For “blank” things like “no parent book” I’ve inserted a blank feature. For “different” things I’ve described them in the appropriate row/column.

I started with a problem that the row content text was being cut off. I went to my theme provider and they gave me some CSS to try and now I see the content but the row heights are different so one can no longer read accross the tables.

I really want to show all of the rows, at the same height so they are proper rows, and allowing the “enquire” buttons at the bottom of my table to line up with one another.

My theme provider doesn’t see the problem. I feel that I should be able to do this. It would be possible to layout a table like that in Excel or Word or old-school HTML tags. I can’t work out how to do it with your mechanism.

Can you explain, please? Thanks.

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 23 days, 11 hours ago Alex S Hi, I Work Here

    Hi MarkCornwell

    Do you have a public URL where we can take a look at what’s going on?

    As long as you have the same number of features everything should align correct. Can you please send me a copy of the CSS your theme developers gave you?

  2. 20 days, 10 hours ago MarkCornwell

    Why are my replies not showing up? This is odd.

  3. 20 days, 10 hours ago MarkCornwell

    Trying a third time… here is the code that I was given.
    .ow-pt-feature {
    height: auto !important;
    }

    .ow-pt-column .ow-pt-features {
    height: auto !important;
    }

  4. 20 days, 10 hours ago MarkCornwell

    Posts don’t seem to be showing up on here if I add a url. I’ll post it without the www bit and dots and slashes typed in!

    morethanaphotograph dot com slash wedding-photography-prices

    If I leave the CSS out then row heights are even but the text gets cut off after two or three lines.

  5. 17 days, 11 hours ago Alex S Hi, I Work Here

    Hi Mark,

    That’s odd. We haven’t received a report of other users having issues replying like that. To clarify, was the reply that was rejected the same as your last reply – just without the edited URL?

    Regardless, to confirm, did you tick Equalize row heights? This is the last setting for the Price Table widget.

    I ask as that’s all that should be required. Hm. By the looks of it, the CSS you’ve added (the CSS you mentioned in your last reply) seems to be causing this issue because if I remove it the columns start to align correctly. Can you please try removing the CSS you added?

  6. 17 days, 9 hours ago MarkCornwell

    Alex, thanks. Yes the reply that I tried to post just “vanished” when I hit “Post Comment” whether I put the full URL in or truncated it to have no “www”.

    Ok, to confirm what you asked, I *do* have equalize row heights ticked. I’ve taken out the extra CSS that I was given. Have another look.

    If I look on a browser on my PC the price table looks just fine. If, however, I go to my iPhone and look at the same page I scroll down to the “white label” and where it says “Informal images of your day as it unfolds finishing just prior to the wedding breakfast” I can see the top of the word “breakfast” but not the whole word. Other rows which have more than a few words are similarly affected on all columns. It is as if the font is too big or the row height hasn’t allowed for the font size. For clarity, I do have font sizes set beyone 1em for some elements of my page so I suspect that it may be that I need help in ensuring the table text size is correct!

  7. 16 days, 14 hours ago Alex S Hi, I Work Here

    Hi Mark,

    That’s odd. Would it be possible for you to send me an export for your price table? To do this please open up the linked page in the editor and click the Layout button in the Page Builder toolbar. Then click import/export and then click download. Please upload the export to a 3rd party file hosting site such as teknik.io.

    Add the following CSS to your webiste (using the method you previously used):

    @media (max-width: 680px){
    	.ow-pt-feature {
    		height: auto !important;
    	}
    
    	.ow-pt-column .ow-pt-features {
    		height: auto !important;
    	}
    }
    

    That’ll reduce the spacing until I work out what’s going wrong.

  8. 16 days, 9 hours ago MarkCornwell

    Thanks, Alex, that’s definitely better!

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More