I got issue with related product and span9 page..

[jyc109th]

Hello.
I’m David, and I almost finish doing job 🙂

Neighborhood theme is really good, and thank you.
Anyway, I got new issue ‘related products’ with span9 on product page.

I inserted below code for full width with related products
body.woocommerce .has-one-sidebar .upsells.products ul.products li.product, body.woocommerce .has-one-sidebar .related.products ul.products li.product { width: 195px; }
}

<Issue Summary>
1. ‘Related Products with span9’ on desktop, with carousel -> O.K
2. ‘Related Products with span9’ on desktop, with no carousel -> O.K
3. ‘Related Products with span9’ on mobile, with carousel -> O.K
4. ‘Related Products with span9’ on mobile, with no carousel -> NOT O.K
(I attached screen capture file)

Link address:
1. with carousel http://www.gagestore.co.kr/shop/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EA%B2%8C%EC%9D%B4%EC%A7%801-50-1-90mm/
2. with no carousel
http://www.gagestore.co.kr/shop/xtd-%EB%B3%B4%EC%96%B4%EA%B2%8C%EC%9D%B4%EC%A7%805-6mm/

So, I tried to new configurations like below, but it didn’t work properly

@media only screen and (min-width: 1200px)
{ code.. }
@media only screen and (max-width: 979px)
{ code.. }
@media only screen and (max-width: 767px)
{ code.. }

I know that this is not normal case, but I’d like to make my shop page with span3, span9! 🙂

thank you~

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 479px) {
body.woocommerce .has-one-sidebar .upsells.products ul.products li.product, body.woocommerce .has-one-sidebar .related.products ul.products li.product {
    width: 280px;
}
}

Thanks
Mohammad

[jyc109th]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please remove last css code and use this css code:-

@media only screen and (max-width: 479px) {
 div.carousel-overflow ul#products.products li.product {
    width: 100% !important;
    
}
}

Thanks
Mohammad

[jyc109th]

Hello, Mohammad

Thank you for your reply!

your code worked! perfect!

🙂

[Mohammad – SUPPORT]

Hi,
I am glad to helped you.
Thanks
Mohammad