Hello,

I am encountering a couple small problems in the category (browse) page that I hope can be solved.

1. At the right side of the pictures you can see a small verical line that is a small portion of the dark background of the cart button. How can we completely hide it? It appears on Firefox only while on Safari and Chrome doesn't so I guess it's mainly a problem of Firefox/Mac.
2. Since pictures are not of the same size, some is higher than other and the page overview does result asymmetric. So what we would need is to have all the product boxes with the same fixed height instead of the dynamic resizing. I already did this modification on the .css in the past on VM 1.1.9 but with VM2 and Cleanmart the situation is quite different.

May you help please? We will need the same also with the other site we are developing with Puremart ;-)

Attached a screenshot showing what I am talking about.

Thank you.

Regards,
Maurizio

Update: I found the way to make all boxes at fixed height and I also added a white background (see picture) to boxes and
now everything looks definitely better (also the dark vertical line disappeared).

What I need now is to bring the 'group' Short description, brand logo, product name and so on (so everything except from the image) at the bottom of the box so that the result will be more harmonic but here I really need your help if possible ;-)

Also I would like to hide the multigrid leaving visible only list and grid view.

Thank you very much

Hi,

Are you working in a live server?
Since you need some CSS customization, i need to browse your website.

Please provide me URL where i can browse and see your category page.

By the way, you can simply hide the "MultiGridView" button by using display:none; CSS rule, no need to make any hard coding into PHP files.

Regards,
Support

Hi,

yes I am working on a live server but, since the website is under develpment is still closed. So I need to send you superadmin access privately. May you please provide me with an email address here I can sendo you the superadmin details?

What we are trying to achieve is to have an harmonic view of the category grid even if the picture heights are different. Or maybe is it possible to make modification in VM which resizes all thumbnails witht exacly the same sizes (height and width) independently from its original size?

Waiting for the email address, thank you so much

Regards,
Maurizio

Update
I temporarily opened the trial website so that you can take a look at. Then, if you will need superadmin access just le me know where I can send them to you:

HOME PAGE
www.tsgitalia.eu/index.php/it/

EXAMPLE OF BROWSE PAGE (please select grid view 'cause I set list as default):
www.tsgitalia.eu/index.php/it/catalogo-prodotti/guanti-monouso/guanti-in-lattice

Keep surfing the italian site because the english one is not correctly configured yet.

Thank you.

Hi,

As i am seeing you have defined "fixed" 450px height for the entire box in the GridView layout. And since you have different picture resolution for different product pictures, using "padding" or "margin" with respect to product image is not the case for you.

First of all, i should say; This is a 100% custom modification and we don't provide free support or step-by-step instructions for custom coding modifications. All i can give you is providing you some TIPs.

in modern HTML and CSS3, you can't vertically align the element to the bottom easily. (it was so easy with <table>), but with DIV's aligning the elements to the center,bottom or top; we have different methods, some of them are complex, some of them are easy. One of them is (and the most efficient one) is using position:relative; for the container and position:absolute; bottom:0px; for the inner element.

So,
1- Open this CSS file:
/templates/yoo_avenue/html/com_virtuemart/assets/css/flexibleVM2Global.css
find: .FlexibleHover2 {....} CSS rule and remove the position:relative; property from it.

2- Then find this CSS rule: #GridView .FlexibleBrowseThumbProductInner {...} and include position:relative; in it

3- Find this CSS rule: #GridView .FlexibleBrowseThumbProductLower {...} and include position:absolute; bottom:5px; in it

The result will be:


About this problem: At the right side of the pictures you can see a small vertical line
It is a Firefox issue,(it doesn't happen in Safari or Chrome). Putting a 1px margin to right-hand side will eliminate this problem.

The solution:
Within the /templates/yoo_avenue/html/com_virtuemart/assets/css/flexibleVM2Global.css, find this CSS rule:
.effect10 .figcaption {...} rule, change the width:100%; to width:99.9%

The problem will be gone from Firefox as well.

If you like CleanMart and satisfied with the support you have received, please "write a review" on:
www.flexiblewebdesign.com/Virtuemart-2-Templates/CleanMart

Rate CleanMart and write a couple of sentences to share your experience with the support team.
It won't take more than 2 minutes from you but it is extremely important for us.

Thanks in advance!

Regards,
Support

Also, there is one more thing i noticed in your website.
The "Dropdown" box for the "Shopping Cart Module" opens in the wrong orientation.

Open the Flexible - VirtueMart Shopping Cart module and choose RIGHT for the Dropdown box orientation parameter. The drop down box will be orientated correctly.

Regards,
Support

Thank you very much, now almost everything works like a charm. I said 'almost' because I put the 1 px margin as suggested and actually the vertical line disappeared but now did appear an horizontal one (always on Firefox only).

Just rated and written a couple of sentences about CleanMart (and not only).

Update:
SOLVED the problem about Horizontal Line.

Found this:
FlexibleHover2 .figure img {
max-width: 100%;
display: block;
position: relative;
}

an modified width the same way

max-width: 99.9%

Thank you very much.

I am glad everything works out as expected.

Case solved. topic is closed.

regards,
support