Bigger product boxes or more place for names

tim
Everything cosmetic that you can adjust is in the template folder includes/templates/default.catalog/. See pages/index.inc.php.
I see here three links:

<?php include vmod::check(FS_DIR_HTTP_ROOT . WS_DIR_BOXES . 'box_campaign_products.inc.php'); ?> </div> <?php } ?> <div class="tab-pane fade in" id="popular-products"> <?php include vmod::check(FS_DIR_HTTP_ROOT . WS_DIR_BOXES . 'box_popular_products.inc.php'); ?> </div> <div class="tab-pane fade in active" id="latest-products"> <?php include vmod::check(FS_DIR_HTTP_ROOT . WS_DIR_BOXES . 'box_latest_products.inc.php'); ?>

But in boxes is nothing to do (with resizing)

<div id="box-latest-products" class="box"> <div class="products row half-gutter text-center"> <?php foreach($products as $product) echo functions::draw_listing_product($product); ?> </div> </div>

It must be in another place ?
tim
Oh you mean the item boxes? They are views/listing_product.inc.php.

Find

<div class="col-xs-halfs col-sm-thirds col-md-fourths col-lg-fifths">

Change to

<div class="col-xs-whole col-sm-halfs col-md-thirds col-lg-fourths">

Means four in a row on large screen devices. Three in a row in medium devices. Two in a row for small devices. And whole row on mobiles.
Now is much better:
And one row on mobile devices - it is a great solution.

But still product names are too long :(
Can I get here second row for longer names?

----------
And my small idea - maybe can you do a small place on the forum/site with hints for DIY? 
(You can attach there similar topics  for all users)
tim
I would remove the attributes from the product name, merge Snake Chain into one product with regular product options for desired attribute.

For two rows you could give the css class .name a fixed height and.

.products.row .product .name {
  height: 50px;
  white-space: normal;
}
One product it is a good idea, but I have more "snakes "

Snake 0.75, 0.80, 0.90 etc....

And later f.e. herringbone chain  - or Prince of wales chains (even longer names) + type 1 mm/2 mm/3 mm

--------------------

This code should be in app.min.css?
I'm saying put the attributes 0.75, 0.80, 0.90 for product options.


Sound good to me - but we are to far with coding.

-------------------

Devkit installed but I don't know how can I use it.
tim
The Developer Kit runs automatically on the server when your browser initiates a hard refresh (Ctrl + F5 in Chrome).

Accessing /path/to/css/file.min.css will automatically attempt the following:
- Update /path/to/css/file.min.css from /path/to/less/file.less and return the updated content.

If Developer Kit is installed corrently. In your case, simply edit less/app/listing.less and hard refresh the page.
Ok - I must find now file app.min.less in less folder. But I see here nothing similar. 

I see here only app/boxes.less (sound similar) - but 

.products.row .product .name

class is not here .....
tim
There is no app.min.less. That's not the file to look for.

css/app.min.css is less/app/*.less. Well it's actually less/app.less byt that file gather the app/ subdirectory.

If you right click the product title and select Inspect Element. What file and line does your browser tell you where the styling is stored?

Your browser tells you to look for less/app/listing.less. Edit that file, hard refresh page in your browser. If you don't see any changes the Developer Kit is not functioning properly and you might want to unminify the css and skip less for the future.

If you edit the CSS directly the .map files cross reference to LESS will be broken/corrupt. The Developmer Kit renders new .map files on the fly for you automatically when less files are edited and you refresh page.
Hey, yes now is all clear.

But for first time - it was not so easy. Without your help I would be here without a chance.

Thank you for your help

And now effect:
tim
Everyone has a first time some time. Check out the wiki. It has some useful info.