eCommerce construction > Templates

Bootstrap5 and Three Columns

(1/1)

dhigz:
I recently upgraded a site to AbanteCart 1.3.4 and using the Bootstrap5 template. No matter what I do, I cannot get the page to work with three columns. Using either column left or column right work fine but both destroys the layout.

What happens: When using three columns, the columns stack instead of being displayed inline.

I have tried several different combinations of flex utilities with some success but nothing works consistently.

I would really like to use a three column layout. Any thoughts? Suggestions?

Basara:
Hello.
You cant use 3 columns in this template

dhigz:
Well, respectfully, I didn't like the answer. So I set out to find a solution. Here it is.

The goal is to specify the width of the center column based on the number of columns on a page layout and set the col-lg-[value] accordingly. Ideally 0 for 1 column (width = 100%), 6 for 2 columns (width = 50%) and 4 for 3 columns (width = 33.33%).

In page.tpl there is an attempt to use a math equation to determine the width of the center column based on the number of columns on the page. It starts with 0 and adds 1 each for left and right columns to get the $preset_columns value. Then through the calculation 12 - 6 * $preset_columns, it is supposed to determine the value.

Two columns works correctly (12 - 6 * 1 = 6).
But no matter how you slice it, you cannot increase a value and expect to get a lower value result: 12 - 6 * 2 = 0, not 4.

The simplest answer is to do away with the current formula and just set a value based on the number of columns. There are multiple ways to write the formula to come up with the correct values but the end result needs to be 1 col = 0, 2 col = 6, and 3 col = 4.

It works great on my site.

Basara:
Hello.
Thank you for sharing. You are welcome to submit a pull request to the 1.3.5 github branch to make your code visible to others
https://github.com/abantecart/abantecart-src/pulls

Navigation

[0] Message Index