Home>Support>@media css change in the pricing table widget

@media css change in the pricing table widget

By LanxDigital, 7 years ago. Last reply by LanxDigital, 7 years ago.

Hello!

I am using the Site Origin Price Table in a new site. On a large screen, three tables are displayed side by side and the text looks great in each cell.

I have varying amounts of text in each cell which I have shortened and equalled out as best I can. If the ‘equalise row heights’ is ticked, some text starts to disappear (title section) or appear misaligned, no longer in its cell. Some text shows over the top of another cell for example. This starts to look messy.

I have tried using various css and font scaling techniques but haven’t found the right solution. At the moment I have ‘equalise row heights’ unticked but this means as I resize the browser between 681px to 768px in width, the bottom of each table finishes in a different place while the tops are still aligned. This is with as many text edits as I can make to even things out.

What I would love is one of the following:

A solution where the cell height of each table row matches that of the adjacent table row, all cells adjusting to match the height of the cell that has expanded most in height to fit the text. Without ‘equalise row heights’ ticked, this would mean that some cells have excess height but all tables will be the same height. It would look much neater I think. OK, that sounds a bit complicated to resolve and is hard to explain but if anyone has any bright ideas . . . .

I think option 2 will be much simpler:

Can anyone advise the correct CSS to add so that I can force the tables to display one below the other when a screen is less than 768px wide?

At the moment, the layout changes and tables are displayed one below another (no longer 3 tables side by side) when the screen size is less than 681px wide. So at 680px the tables drop one below another for smaller mobile screens and all looks neat again. I would like to change that so it occurs when the screen is less than 768px wide. I have looked for the relevant @media css but I haven’t been able to find it.

I wonder if anybody else has already made this change? I know the css is there somewhere I just can’t find it.

I haven’t included my theme or site info and such as I think all I need here is the correct @media css to alter parameters already written into the pricing table widget.

Also I have a maintenance page displayed at the moment which is probably a good job : )

Many thanks in advance for any help.

Kind regards

Lanx

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Lanx,

    If the ‘equalise row heights’ is ticked, some text starts to disappear (title section) or appear misaligned, no longer in its cell. Some text shows over the top of another cell for example. This starts to look messy.

    That definitely shouldn’t be happening. Do you have a public URL where we can take a look at what’s going on? Also, would it be possible for you to send me an export for this widget? To do this, please open up the linked page in the editor and click 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.

    I would like to change that so it occurs when the screen is less than 768px wide. I have looked for the relevant @media css but I haven’t been able to find it.

    Please add the following CSS to WP adminAppearanceCustom CSS:

    @media (max-width: 768px) {
	.so-widget-sow-price-table .ow-pt-columns-atom .ow-pt-column {
		float: none;
		width: auto !important;
		margin-bottom: 20px;
	}
}

    You might also need to install the SiteOrigin CSS Editor.

  2. 7 years, 2 months ago LanxDigital

    Hi Alex

    Many thanks for the reply.

    I realised I missed a detail off the start of my question which was to say the issue only happens when re-sizing and viewing on smaller screens. I couldn’t amend or add a comment initially so just hoped the message still made sense.

    After familiarising myself with the page builder some more I have tried a different config which has resolved the issue.

    Before I had one table with three columns in one full width page builder block. It looked fine on large or small screens but I believe the text was simply too much for the resizing to be effective on certain (medium) screen sizes. Un-ticking the ‘equalise row heights’ resolved the text spilling into adjacent cells but made the layout look messy.

    I have now made two separate rows using page builder, each row has two columns of equal width. Inside each row column I have added a separate one column table (I now how 4 tables instead of three).

    This has resolved the issue for me and the tables now behave well no matter what the screen size. Also adding separate tables rather than using one table with multiple columns looks cleaner. Perhaps my solution might help somebody else who has only just started using the page builder.

    Thanks again for your help and for the CSS too. I tried some @media css tweaks but couldn’t get the layout to change at the screen sizes I specified and couldn’t quite see why. Your CSS may well come in handy another day for me.

    I’ll have a look now for somewhere to mark this thread as resolved or question answered.

    Thanks again

    Lanx

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