woocommerce product add-on is not in the right place(too close to right) - Support

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 17, 2017 at 9:54 am #734607
YongyanLi
Participant
Hi, Can you help me to solve this problem?
add the woocommerce product add-on extention lately, but the content didn’t show quite well.

laptop view( looks better but still not in the right position)
https://drive.google.com/file/d/0B6L9QZ3Td5YjQVJKY2h4WTB6UVk/view?usp=sharing

Mobile view( looks really terrible)
https://drive.google.com/file/d/0B6L9QZ3Td5YjZEctekdZWkNpdVE/view?usp=sharing

setup screenshot
https://drive.google.com/file/d/0B6L9QZ3Td5YjZTcxRl9uVXB5WFU/view?usp=sharing
- This topic was modified 7 years, 10 months ago by YongyanLi.
January 19, 2017 at 8:16 am #735726

Nikko
Inactive Moderator

Hey YongyanLi,

I think we could hep you with that one, can you post the link to that page? so we can take a closer look.

Best regards,
Nikko

January 19, 2017 at 8:18 am #735727

YongyanLi
Participant

Hi, Nikko

Thanks very much.

please check below

January 20, 2017 at 7:01 am #736246
Nikko
Inactive Moderator
Hi,

Try adding this css code in Quick CSS (located in Enfold > General Styling):
```
@media only screen and (max-width:767px) {
  #top .main_color .product-addon textarea {
    background: #fff;
  }

  h3.addon-name, 
  .addon-description p {
    font-size: 12px;
  }

  #top .product-addon .form-row label, 
  #top .product-addon .form-row label span {
    color: #d55448;
}

  #top.single-product .single_variation_wrap {
    margin-left: 20px;
  }
}
```
Just adjust the left margin as you see fit. Hope this helps :)

Cheers!
Nikko
January 20, 2017 at 7:23 am #736259

YongyanLi
Participant

Thanks very much, Nikko

it works greatly on mobile
so If I want the laptop view to the same, what to do?
just delete the below texts?
@media only screen and (max-width:767px) {

January 20, 2017 at 7:35 am #736262

Nikko
Inactive Moderator

Hi,

Yes, you just need to remove:
@media only screen and (max-width:767px) {
and the last
}
And that should apply in every device.

Regards,
Nikko

January 20, 2017 at 7:41 am #736265

YongyanLi
Participant

GREAT! Thanks Nikko

the code is working good

January 20, 2017 at 7:56 am #736273

Nikko
Inactive Moderator

Hi,

Glad we could help and thanks for using Enfold :)

Best regards,
Nikko
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.