VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: Funtshirts on June 14, 2016, 19:35:30 PM

Title: Spacing and reordering in the add to cart area
Post by: Funtshirts on June 14, 2016, 19:35:30 PM
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 (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.
Title: Re: Spacing and reordering in the add to cart area
Post by: GJC Web Design on June 14, 2016, 22:43:40 PM
.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;
}

}
Title: Re: Spacing and reordering in the add to cart area
Post by: Funtshirts on June 15, 2016, 01:08:20 AM
Thanks for your reply.
This is one piece of code? In what file can i find this?
Title: Re: Spacing and reordering in the add to cart area
Post by: GJC Web Design on June 15, 2016, 12:32:16 PM
???

css works anywhere
Title: Re: Spacing and reordering in the add to cart area
Post by: Funtshirts on June 15, 2016, 13:17:25 PM
Then how do i add it anywhere?
Title: Re: Spacing and reordering in the add to cart area
Post by: jenkinhill on June 15, 2016, 13:44:56 PM
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
Title: Re: Spacing and reordering in the add to cart area
Post by: Funtshirts on June 15, 2016, 16:33:39 PM
Thank you both for your answer.

That did the trick! You guys really helped me out. Thanks!
Title: Re: Spacing and reordering in the add to cart area
Post by: Funtshirts on June 15, 2016, 17:48:54 PM
One more thing..

How can i get more space between these parts? (see added screenshot)
Title: Re: Spacing and reordering in the add to cart area
Post by: jenkinhill on June 15, 2016, 18:25:09 PM
Probably a similar way - it's time to start gettiing used to Firebug:  http://forum.virtuemart.net/index.php?topic=116620.0
Title: Re: Spacing and reordering in the add to cart area
Post by: Funtshirts on June 16, 2016, 00:28:01 AM
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.
Title: Re: Spacing and reordering in the add to cart area
Post by: jenkinhill on June 16, 2016, 11:25:38 AM
Using Firebug:
#span_color, #span_img {
    margin: 4px 0;
}

I have not checked to see if it causes any issues elsewhere.
Title: Re: Spacing and reordering in the add to cart area
Post by: Funtshirts on June 16, 2016, 12:07:48 PM
Thank You for that Jenkinhill. That worked.
Don't see any other issues elsewhere.