News:

Support the VirtueMart project and become a member

Main Menu

Spacing and reordering in the add to cart area

Started by Funtshirts, June 14, 2016, 19:35:30 PM

Previous topic - Next topic

Funtshirts

Hello all,

Can anyone tell me how i can order the product field types so that they are below one another?
And add a little space between them? It all looks kinda messy now..
https://www.funtshirts.nl/shop/land-rover/downhill-land-rover-t-shirt-heren-detail

Also added a screenshot.
Edit: added another screenshot of how the color block look on mobile. thats wrong as well..needs spacing between the rows.

GJC Web Design

.product-field.product-field-type-S {
  clear: both;
}

@media (max-width: 480px) {
.addtocart-area {
  margin: 30px 0 0;
}
.productdetails-view div.productdetail {
  padding: 0 0 20px;
}

}
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

Funtshirts

Thanks for your reply.
This is one piece of code? In what file can i find this?

GJC Web Design

GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

Funtshirts


jenkinhill

But you really can add it almost anywhere, but normally you would add it into whatever css file is being used to style the VM output.
You are using JHCoptimise so it is not possible to see what css files you are using.

In normal default VM it would be added in a css override.  http://docs.virtuemart.net/tutorials/templating-layouts/106-override-vmsite-ltr-css.html
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Funtshirts

#6
Thank you both for your answer.

That did the trick! You guys really helped me out. Thanks!

Funtshirts

One more thing..

How can i get more space between these parts? (see added screenshot)

jenkinhill

Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Funtshirts

I use and pretty much know how to use Firebug, but i wouldnt know how to make the piece of code like GJC did above.
And i did try pretty much all evening but the best result i got was getting them in a vertical line lol.. :/
I was hoping you or GJC could show me what the code should like like that fixes the space inbetween the color blocks.

jenkinhill

Using Firebug:
#span_color, #span_img {
    margin: 4px 0;
}

I have not checked to see if it causes any issues elsewhere.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Funtshirts

Thank You for that Jenkinhill. That worked.
Don't see any other issues elsewhere.