Home › Forums › WoodMart support forum › Product customization

Product customization

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 20, 2017 at 11:55 pm #29826

    leonidas
    Participant

    Hello,
    some time ago you gave me a code to customize my product page;

    @media     (max-width: 1024px) and (min-width:768px){

    div.product-image-summary-inner, div.product-image-summary-wrap {
    flex-wrap: wrap;}

    div div.product-image-summary-inner>.col-sm-4 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;}

    div div.product-image-summary-inner>.col-sm-8 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom: 30px;}}

    I made a few experiments and customized the above code:


    @media     (max-width: 2600px) and (min-width:1024px){
    div.product-image-summary-inner, div.product-image-summary-wrap {
    flex-wrap: wrap;}

    div div.product-image-summary-inner>.col-sm-4 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;}

    div div.product-image-summary-inner>.col-sm-8 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 90%;
    width: 90%;
    margin-bottom: 30px;
    margin-left: 60px;
    }
    Also changed the thumbnail orientation.

    I have a few questions:

    1. Can I have different thumbnail orientation from 2600 to 1024 (vertical) and from 1024 to 768 (horizontal carousel)?

    2.If the answer is positive can we change the position of the “percentage sale” label to the designated position?

    3. Can we move the product description to the right until it reaches the left side of the product image?
    Regards Leonidas

    December 21, 2017 at 7:37 am #29843

    Artem Temos
    Keymaster

    Hello,

    1. But it is already working in that way. On smaller screen our vertical carousel is replaced with horizontal one.

    2. Use this code to fix it

    @media (min-width: 1024px) {
	
body div.single-product-page .product-image-summary .product-labels {
	width: 75%;
	max-width: 75%;
}

body div.single-product-page .product-image-summary .product-labels .onsale {
	left: -4px;
}

}

    3. But it looks different for us https://gyazo.com/02ddd0ee593426c0634c565e355c4c65

    Regards

    December 21, 2017 at 8:53 am #29866

    leonidas
    Participant

    Thank you.I didn’t noticed.Maybe I was tired when I did the cusomizations!
    Close the ticket please

    December 21, 2017 at 9:26 am #29877

    Artem Temos
    Keymaster

    OK, great.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Product customization’ is closed to new replies.