RESOLVED - "Related products" need to be smaller to fit more across not just two, how?

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
14 years ago
Currently on the site when you go into an item and it shows the related products beneath it, the related products are in boxes that the screen can only fit two side by side (and there not centered) I need to somehow make them slightly smaller to fit three side by side (or more).
14 years ago
Alright I was able to get 3 side by side now by changing "relatedproducts.ascx" found in modules to the following:

<asp:DataList ID="dlRelatedProducts" runat="server" RepeatColumns="3" RepeatDirection="Horizontal"
        RepeatLayout="Table" OnItemDataBound="dlRelatedProducts_ItemDataBound" ItemStyle-CssClass="ItemBox">

Were it says "repeat columns" I changed it from 2 to 3. Which allows it to show three columns of items side by side now. However they are too large and the third box is outside the item window a little bit.

I noticed you can also change the thumbnail size by going into media in global settings in your admin account. However this does not make the box smaller, just the images.

So how do I make the columns boxes smaller?
14 years ago
Alright to make each box containing a related product smaller you need to navidgate to your them folder and open products.ascx once inside there find the following code:

.RelatedProductsGrid
{
}

.RelatedProductsGrid .title
{
  padding: 5px 5px 5px 0px;
  font-weight: bold;
  text-transform: uppercase;
  clear: both;
  font-size: 1.1em;
  color: #ff9933;
}

.RelatedProductsGrid .ItemBox
{
  padding-bottom: 5px;
  text-align: center;
  vertical-align: text-top;
}
.RelatedProductsGrid .RelatedItem
{
  text-align: center;
  margin: 5px 5px 5px 5px;
  border: solid 1px #d3d3d3;
  width: 150px;
  height: 150px;
}

.RelatedProductsGrid .RelatedItem .title
{
  margin-bottom: 5px;
  margin-top: 5px;
  text-align: center;
  font-weight: bold;
  text-transform: none;
  font-size: 1em;
  padding: 0;
}

.RelatedProductsGrid .RelatedItem .picture
{
  text-align: center;
}


These are the areas related to "relatedproducts" to change the box size simply change the width and height as I have done (originally 200px now 150px)
13 years ago
Hi I have the same problem  with the application, however I have installed 1.7 version and it does not show the same line of code.
I am wondering if you may help me or give a suggestion since I have spent a bit of time doing this and my head is just not working right trying to locate the actual file in this version.
thanks in advance.
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.