Post by olap001 » Sat Aug 08, 2020 1:29 am

I would like to adjust the width of the left column on the category page of my site - The filter module occupies 100% of the left column however it is too wide. I've searched through the forum but couldnt find anyone with the same issue.



Fri Jul 18, 2014 3:29 am

Post by IP_CAM » Sat Aug 08, 2020 1:45 am

It's basically a Theme-related problem, you should therefore better contact
your Theme Vendor on such. But generally, the left-side section is set to work
on all pages, where it shows up, and only to reduce it's size in category sections
requires a Custom Job, and possibly one or more custom Files, to make such
work. It's therefore, in any case, a Custom Job, and therefore a paid one too.

I am no longer active at the Forum. Please do NOT send me Personal Mails,
they will no longer be replied to.
My Github OC Site:
4'100 + FREE OC Extensions, on the World's largest Github OC Repository Archive Site.

User avatar
Legendary Member


Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by cyclops12 » Sat Aug 08, 2020 1:52 am

If there isnt any settings in your theme then you will have to change the column widths yourself in the relevant files
you can change column-left from

Code: Select all

<div class="col-md-3" id="column-left">

Code: Select all

<div class="col-md-2" id="column-left">
But then you would also have to change the

Code: Select all

<div class="col-md-9">
for the rest of the body page to

Code: Select all

<div class="col-md-10">
All above is just an example

Expert Member


Sun Sep 27, 2015 1:10 am

Post by by mona » Sat Aug 08, 2020 2:39 am

Firstly - I LOVE that red dress ..

Here is some honest advice .. Don’t do it.
Ok it is a little wide on wide screens .. but .. to change it is col-md-2 is too narrow and all other simple solutions will cause issues all over the place.

What you could do instead which achieves the same and so very simple (actually it will look quite good) .. is something like

Code: Select all

.bf-attr-block {
    padding: 0px 20px 0px 20px;
for specific elements

Code: Select all {
    padding: 0px 20px 0px 20px;
} {
    padding: 0px 20px 0px 20px;
However - if you REALLY must ..

you will need to change your catalog/view/theme/YOURTHEME/template/product/category.tpl
Columns are set out in dozens i.e. 12
currently this is set to be if you have something in the left or right use 3 and 9
if you have something in the left and right use 3 6 3
else use 12

each column is set using bootstrap.css
so col-md-3 is 25% and col-md-9 is 75%

I suggest you do not edit that
Instead you could create a new rule in your stylesheet.css say col-md-new3 and have it at 20% and therefore you will need a new rule for col-md-new6 at 60%, col-md-new9 at 80% and then there might be some other issues arising because EVERYTHING is set on the basis of bootstrap ... so how much does it REALLY bother you that it is a little wide (if you are actually looking at it?)

You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.

Spinning Social : Links : Menus : Payments : Socials : Ads : Screen Backgrounds : Galleries : Headers : Banners : Promos

Active Member


Mon Jun 10, 2019 9:31 am
Who is online

Users browsing this forum: No registered users and 25 guests