Featured Products Layout Problems

[fredmeister]

Hi,

I am Running Joomla 3 and Virtuemart 3.0.6.2.

I setup the Featured Products module with the following settings:

Layout:  Default
Number of Displayed Products=4
Products per Row= 4
Display Style= List based ul-li

However, the products line up vertically (1 product per row).

I also tried the following settings, but it didn't help.

Layout= Single
Display Style= Div based

Can anyone help me fix this?

Thank you

[AH]

If you post your url someone can take a look at it for you

[Studio 42]

Hi,
Check with your template provider.
This are CSS rules to Add.
Eg.

width25%,float:left

for the container
And a

clear:both;

after
or

display:inline-block;width 25%

remove the stupid rules in virtuemart CSS:

Code Select Expand

min-width:220px and add a media query. You have no real universal CSS rules, but this is the base

Greets,
Patrick

[Meton]

Hi,

I am Running Joomla 3 and Virtuemart 3.0.6.2.

I setup the Featured Products module with the following settings:

Layout:  Default
Number of Displayed Products=4
Products per Row= 4
Display Style= List based ul-li

However, the products line up vertically (1 product per row).

I also tried the following settings, but it didn't help.

Layout= Single
Display Style= Div based

Can anyone help me fix this?

Thank you

Hi M8,

As stated above a url or css coding would be helpfull. 1 thing pops to my mind directly and that is the inline-block in the css atributes?

Regards,

Meton

[fredmeister]

Thank you for your replies and I apologize for the delay in my reply.

The URL where the Featured Products is being "tested" is http://www.lavapoteuse.ca/contactez-nous.

@Patrick, I tried the rules that you suggested, but I guess I didn't add them in the right places as they didn't work for me, so I reverted back to the original state.

I appreciate any help and/or ideas on how I can get this to work.

Thanks again,

Freddy

[Studio 42]

Bonsoir,
in YOURSITE/templates/gk_bikestore/css/template.css
add this rule:

Code Select Expand

.width25 {
  width: 25%;
  display: inline-block;
}
is the simplest way and work for most browser
But you have many bad or missing CSS rules

Salutation,
Patrick