category results layout

Hello,

Just wondering if you can have the category results layout from when you click on a category
to have the same layout as the front page that shows items side by side in a row of 4 in my case,

where right not the results of a category are stacked one on the other in a column of 3 such as

ITEM | Description | Price
ITEM | Description | Price
ITEM | Description | Price
ITEM | Description | Price

and I would like

ITEM ITEM ITEM ITEM
description description description description
price price price price

is a layout, but can it be changed in the admin ?
or only in the code ?

samples would be front page Featured Products is the layout
I would like to see under https://www.efpsupply.com/food/augason-farms/cereals--grains as well as the other category results showing its products.

I think it would look better and show more items at once, just as the fron page does.

Thx,
Erick

Install the Column Layout Grid mod from Free Addons.

That worked great, thank you.

might you have any thoughts to adding some padding between the listings ?

Add to your stylesheet

.centerBoxContentsProducts {width: 24% !important; padding: 0.2em;}

You can't afford more padding than that with four products per row.

I can find .centerBoxContents in the css but no .centerBoxContentsProducts

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

and

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {

   width:auto;
    }

and tried

/The main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
width: 24%;
padding: 0.2em;

        }

maybe my space is just full ?
do you think it looks a bit crowded ?
should I make the site wider ?

Add the exact new rule posted above to your stylesheet (pretty much anywhere).

Making your #mainWrapper a bit wider would give you more breathing room in the center, as would changing the display to three per row instead of four.
Alternatively, your left column is set to 230px (and actually taking 241px due to padding/margins) which is 40-50px wider than the column content needs except for the arrow at the top. Just reducing that would give you more space in the center.

I did set that mainwrapper to 2000px but saw no change in the site so it is limited somewhere else ? still looking
and the left side is a bit bitter to accomidate some categories as you move though the site as some are a bit longer
that the ones on the front page.

does that make sence ? or am I going about it wrong ?

Thx much,
Erick

Since you have a Template Monster template, there are a bunch of different element names and extra elements that need to be styled. The standard #mainWrapper is replaced with .main-width, and some other elements will also need to be styled to change the whole page width - I haven't looked through the code to find all of them.

The only subcategory I could find that wouldn't fit in the sidebox narrowed to say 200px also doesn't fit in the current width (Lindon Farms > Freeze Dried Fruit & Vegetables). If other categories won't fit in a narrower sidebox, you have excessive padding/margins on the right side.