Hi!
Today, I noticed someone posted to the group and asked how to set width for the selected pricing column as he wanted to have one pricing column be more expansive than others.
For example, he has four pricing plans on the website, wanted to make 3rd pricing plan to be more expansive as a hot-selling plan.
After I tested it myself, I found there is no option to set width for individual columns. Suggest adding width option. Currently, there is a width option, but that one is for the button only.
Refer to the screencast below:
Would you please tell me if I have missed anything?
unfortunately, there is no setting for the width of the columns. The pricing tables are built with CSS grid, which means you can override the default styling with only one single line of custom CSS.
Let’s stick to your example: 4 columns, the 3rd one should be wider than the other ones
One possible way is to override the grid-auto-columns (on large screens) with grid-template-columns (like the default on smaller screens) and set a width at each column:
I wrapped the override into a media query to ensure it does not break on smaller screens / overrides the default behavior.
I used the fr unit because it’s easy to handle in this case, but you can use whatever you like to size your columns. I can recommend the complete guide to CSS grid on css-tricks.com to learn more about CSS grid.
Hi @timmse,
Thank you for the reply and provided a solution!
I will check it out shortly.
Yes. I noticed the FR unit, too, when I was viewing the HTML source. However, I am not familiar with FR CSS properties, so not sure how does it work well.
Hopefully, Bricks will consider adding the width option to the Pricing Element to less touching CSS for some users.
And a suggestion, should Bricks create one more category for us to submit our request for Element Improvements? Because this is not a bug, not also a feature request but to enhance the current elements.
the fr unit is totally fine and is often used with css grid (as you can see in the default css too). I will throw your suggestion into the discussion pool and get back to you later.
we decided to rename the “Feature Requests” category to “Feature Requests / Improvements” to keep it as simple as possible. So, whenever you have an idea to extend an already built-in element, feel free to post it inside of this category. Also for discussing on ideas, this is the right place.
Official feature requests for non-existing features / elements should go through the Idea Board as usual.
Pricing tables
This is the first time someone asked to change the width of the pricing tables, so we think it is a relatively rare case. If there will be more and more people asking for that kind of addition to the element, it will probably be implemented.
In addition to the “custom code” solution, there is another simple solution you can use right inside the builder: multiple pricing tables. You can set the width for each under the “Layout” control group (Style tab). In my example i set the first and the last to 25%, the second one to 50%.
Message to myself: sometimes it´s easier not to overthink it
Hi @timmse
Thank you! It’s good to rename the category to know which to go to when submitting the ideas to improve the current elements in Bricks Builder.
I might want to make the targeted pricing table bigger to make the plan more attractive. Haha!
Bigger is always better @jornes - not
You won´t believe how often i (as a graphic designer) hear something like: “make the logo BIGGGGGERRRRRR”!!!
Sure, feel free to do whatever you like, i won´t judge you
Instead - or as an addition - of increasing the width you could change the background color, add a border or apply a more attention-grabbing box shadow to the table, depending on your overall layout of course.
That sounds good too. I will try it out when I am doing the pricing page later.
Just an opinion, just hope that Bricks be more flexible to allow us to design every single part of each element. Make users feel that Bricks is flexible. People love the flexibility.
