[solved] VMVendor Add To Cart Button Floating and My Catalog on JomSocial looks like Dominos

OK, on the vendor profile page you should add these CSS rules to your template custom css or to

www.yoursite.com/components/com_vmvendor...ss/vendorprofile.css

.addtocart-bar span.quantity-controls.js-recalculate {
top: auto !important;
left: auto !important;
}

.addtocart-bar span.addtocart-button {
top: auto !important;
}

For the Jomsocial profile. You can only use the masonry layout if the tab is showing first, this means in an other position than the main content one. If you want to keep this position, go to the Jomsocial VMVendor plugin settings and set the list view.

Hope it helps

nordmograph wrote: OK, on the vendor profile page you should add these CSS rules to your template custom css or to

www.yoursite.com/components/com_vmvendor...ss/vendorprofile.css

.addtocart-bar span.quantity-controls.js-recalculate {
top: auto !important;
left: auto !important;
}

.addtocart-bar span.addtocart-button {
top: auto !important;
}

For the Jomsocial profile. You can only use the masonry layout if the tab is showing first, this means in an other position than the main content one. If you want to keep this position, go to the Jomsocial VMVendor plugin settings and set the list view.

Hope it helps

Thank you so much!

I couldn't get the template custom CSS to work in the template. However, when I changed in the component vendorprofile.css file, it worked perfectly. Thank you!

As for the Masonry layout, it seemed JomSocial wouldn't let me list the VMVendor plugin in the first position (for the "Main content" area). However, I liked the "Horizontal list" layout better than the "Masonry" layout, so I just changed it to Horizontal. So, that is great too!

Thank you. I really appreciate it. Great support! Great component!

I have a problem. The changes you gave me for vendorprofile.css work great (I changed it in the "/components/com_vmvendor/assets/css/vendorprofile.css" file).

However, it only works for 3 or more products. If you only have only 1 or 2 products, the Add to Cart button floats to the left side. I attached two images to show you.

How can we get the "Add to Cart" button to show normally for only 1 or 2 products?

I see,
also add:

left: auto !important;

nordmograph wrote: I see,
also add:

left: auto !important;

So, right now, I have this in the vendorprofile.css file...

.addtocart-bar span.quantity-controls.js-recalculate {
top: auto !important;
left: auto !important;
}

.addtocart-bar span.addtocart-button {
top: auto !important;
left: auto !important;
}

And now the Add to Cart Buttons are back in the boxes but they are not centered. Here are two different users with the buttons not centered (see the images).

Is there more code that I can add to fix this? (it feels like we are so close to solving this)

Also, after making the CSS change, the Buttons are off-center on the iPhone.

It seems the buttons are hard to control on the VMVendor page. On all the other component pages, the buttons seem to be fine.

There must be some way to get the buttons to stay in one location on the VMVendor page. Can you please help me figure this out?