Related Categories and Related Products list themselves vertically

[fmlk4u]

Already more than half a year the issue I have is already reported but not answered, so let me try again.:


« on: September 02, 2012, 07:58:29 AM »

    Quote

Hi All,

Done a search on the forums with no applicable results, so hopefully I'm not reposting an existing question.

My VM2 Store, by default, lists my categories Horizontally.  Perfect!

Unfortunately, Related Categories and Related Products list themselves vertically for some reason, wasting a lot of screen space. 
____________________________________________________________________________________________________________
My addition: I run latest VM 2.0.20b

When I add multiple related categories to an article, these are positioned tightly beneath each other. See attachment. How can I position them three in a row like the view of categories on the page. Thanks so much for your help.

Regards, Fred

[attachment cleanup by admin]

[K&K media production]

Do you have a link to your site? Is this your own template? Maybe you must adapt the css.

[fmlk4u]

Yes, the new site I am working on is http://new.keyboard-centrum.nl and I created the example product with related categories:
http://new.keyboard-centrum.nl/nl/winkel/keyboards/at-3-detail

I can even create super user account for you if needed I can copy the template css in the the thread or send it. Thanks so much for your help and for your fast reply!!

Regards, Fred

[K&K media production]

insert the following in your template css file:

product-field product-field-type-Z {
   width: 33%;
   text-align: center;
   margin-top: 20px;
}
product-field product-field-type-Z img {
   margin: auto;
}

Best Regards,
Maik

[fmlk4u]

I added the css and it didn't work. So I tried

.product-field product-field-type-Z {
   width: 33%;
   text-align: center;
   margin-top: 20px;
}
.product-field product-field-type-Z img {
   margin: auto;
}
And it also didn't work as you can see at http://new.keyboard-centrum.nl/nl/winkel/keyboards/at-3-detail

Thanks anyway for trying to help.

By the way I added it in the template.css where I copied also the virtuemart css

Regards, Fred

[K&K media production]

I can't find it in your template.css

and you must use this

.product-field.product-field-type-Z

.product-field.product-field-type-Z img

[fmlk4u]

Thanks! Now it works!!!

Great!

[fmlk4u]

Well, one little cosmetic issue left. Can you tell me why the first category on page

http://new.keyboard-centrum.nl/nl/winkel/keyboards/at-3-detail

doesn't align with the other two? Thanks again in advance for your fast reply

[K&K media production]

Your image has another heigh.

[fmlk4u]

Hi Maik,

Yes I found out and edited the image by square out the canvas. Thanks again so much for your kind help. Have a good time.

Regards, Fred

[fmlk4u]

Since you could help me so easy, which code is needed for related articles (sub-articles). On http://new.keyboard-centrum.nl/nl/winkel/keyboards/tyros-4-xl-detail?showall=1#accessoires you can see they are now also positioned vertically. Thanks again for your great support.

Kind regards, Fred

[K&K media production]

same thing with

.product-field.product-field-type-R

You can use firebug to find the css classes

[fmlk4u]

Hi Maik,

Wow, how fast your response. Although after midnight here, I tried and copied the following in the css:
.product-field.product-field-type-R {
   width: 33%;
   text-align: center;
   margin-top: 20px;
}
.product-field.product-field-type-R img {
   margin: auto;
}
But is didn't have any effect.

Tomorrow new day for fixing

Regards,, Fred

[K&K media production]

float: left;

[fmlk4u]

Thanks so much Maike, that did the trick.

Next I have a problem with Embedding youtubes, but I will write a new thread about it.

Regards, Fred