Displaying application in two different layouts

Highlighted
New Member
2 0 0
Hello, 
I'm trying to display an application - product reviews in two different formats for the desktop and mobile versions. However, if I have the snippets on the same product template. The product review app only displays on one of the versions - either mobile or desktop. If I remove one snippet from the product template it's able to display in the selected format. Is there any way around this?
 
 

 

 

<div class="desktop">
    {% include 'tabbed-description' %}
</div>
<div class="mobile">
    {% include 'mobile-tdescription' %}
</div>


 /* Large devices (over 600 px) */
@media only screen and (min-width: 601px) {
  .mobile{
    display:none;
  }
} 

/* Small devices (under 600 px) */
@media only screen and (max-width: 600px) {
  .desktop{
    display:none;
  }
}  
  

 

 

/* Product review code */
<div class="manual">
    <div id="wc_review_section" class="wc_review_main_content" data-url="{{ shop.url }}" data-handle="{{ product.handle }}" data-product_id="{{ product.id }}" data-limit="0"></div>
</div>
Cheers,
Brook
0 Likes