reducing size (height) or rows in product lists

[[email protected]]

Hi,

I am amending the 'content.category.php' page and I am trying to reduce the height of the rows for what concerns the 'row product_list_view'.

I have successfully changed its content but I would like to reduce it as much as possible to be able to show as many products as possible.

Where should I look to do that ?

The page I am referring to is http://www.preserving-football-history.net/world-cup/jules-rimet-cups.html

Thank you, as per usual, for your directives.

 

Regards,

 

Pippo

 

 

[bsmither]

Here is a hack that works around the problem of Foundation's .panel class having padding:1.25rem. The .panel class is applied tot he <form> tag which is used in both the .product_list_view and the .product_grid_view.

We are only interested in the .product_list_view, while not affecting the .product_grid_view. That would require somehow applying a style to that particular node that has as a child the .product_list_view class.

jQuery has a nice selector that gives us $(".panel:has(.product_list_view)").css( "padding","0" );. But this is javascript and, while it is do-able, let's stick to CSS.

So, that leaves applying a negative margin to .product_list_view to counter-act the .panel's padding.

Near line 70, find:

         <form action="{$VAL_SELF}" method="post" class="panel add_to_basket">
            <div class="row product_list_view">

Change to:

         <form action="{$VAL_SELF}" method="post" class="panel add_to_basket">
            <div class="row product_list_view" style="margin: -1.25rem 0">

There is a bit more we can do to reduce the interval spacing.

[[email protected]]

It seems to be working this way. Perfect thank you. 

[Claudia M]

How would you do it for the grid view?

Nevermind

[[email protected]]

Hi,

what can we do to remove the interval spacing and remove even more the height of the box or what concerns the row product_list_view ?

As you can see at http://www.preserving-football-history.net/world-cup/jules-rimet-cups.html

I have all the content over two lines but there is still plenty of space under in the same box and a lot of space between products .

I have already reduced the margin to -1.50 but after that it starts overscanning the content out of its box. Can the content be centered ?

Thank you for your help,

Pippo

style="margin: -1.50rem 0"

[bsmither]

Let's try this. Restore the edit you made as detailed above.

Find:

<div id="ccScroll">
   <ul class="small-block-grid-1 product_list" data-equalizer>
      {foreach from=$PRODUCTS item=product}
      <li>
         <form action="{$VAL_SELF}" method="post" class="panel add_to_basket">
            <div class="row product_list_view">

Change to:

<div id="ccScroll"><style>.row.product_list_view.panel{ padding:0;margin-top:-1rem; }</style>
   <ul class="small-block-grid-1 product_list" data-equalizer>
      {foreach from=$PRODUCTS item=product}
      <li>
         <form action="{$VAL_SELF}" method="post" class="add_to_basket">
            <div class="row product_list_view panel">

Find:

            <div class="product_grid_view hide">

Change to:

            <div class="product_grid_view panel hide">

(The spaces just after and before the braces enclosing the CSS rule parameters are required.)

 

[[email protected]]

Hi,

yes, this succeeded in reducing the gap/space between different lines of content, however, how would one reduce the height to two lines of content only ?

Also, if I wanted to change the background colour to white rather than the current shade of grey, where would I action that ?

 

Thank you for all your help.

Pippo

[bsmither]

Your template code probably looks like:

<div class="small-4 columns">
  <h6>
    <a href="http://www.preserving-football-history.net/cisco-webex-room-kit.html" title="CISCO Webex Room Kit">CISCO Webex Room Kit 2-2</a>
    <br>
    <p>another short description</p>
    <br>
  </h6>
</div>

with the link, title, and description being the respective placeholders.

The description editor (CKeditor) will put paragraph tags around the description text - nothing you can do about that - and that adds just a bit of space.

But you can try to reorganize this code to be:

<div class="small-4 columns">
  <h6 style="margin-bottom:0.1rem;">
    <a href="http://www.preserving-football-history.net/world-cup/jules-rimet-cups/cisco-webex-board-70.html" title="CISCO Webex Board 70"">CISCO Webex Board 70" 3-0</a>
  </h6>
  <p>Final</p>
</div>

Put only the link and title in the <h6> tag and remove the <br> tags.

Background color? Of the detail row? That is, the "panel" CSS class? The following affects all panels:

You can add that rule to cubecart.default.css:

.panel { background-color:inherit; }

 

[[email protected]]

Thank you, all sorted now. I actually used "

margin-bottom:-1rem;

and it fixed the space issue. Exactly what needed. I fixed the background-color and I wonder how to implement alternate rows colors. I tried with : 

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

in cubecart.default.css with .panel. Is this possible at all in css ?

[bsmither]

Those rows are not <tr> (table rows). They are <div> blocks in a list.

I'm not sure how to get them to alternate.