Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Additional info section for product - formatting


CherryTree

Question

Site URL: http://www.cherrytreeinteriordesign.com

I I'm having a couple issues with the product page.

1. I'd like to change the font of the additional information section to be smaller than the product information section. How do I do this?

2. When I switch to mobile view, the product information and additional information sections switch places. I'd like to keep the additional info section below the product info.

Thanks in advance!

 

desktop version.png

mobile version.png

Link to comment

6 answers to this question

Recommended Posts

  • 0

That part worked! But on the mobile, it's still switching spots. I'm wondering if it has something to do with the other code I have in there:

/*move product description*/
<script>
  jQuery(document).ready(function($) {
$('.ProductItem .ProductItem-additional').insertAfter('.ProductItem-details-excerpt');
});
</script>

 

Link to comment
  • 0
Quote

But on the mobile, it's still switching spots. I'm wondering if it has something to do with the other code I have in there

It's not the code but understanding how SS treats that part of the page between desktop and mobile. By default, on desktop, that part uses natural order. Which is why when you use the code to put the additional info in a certain location it renders the way you expect. On mobile it is a different game. SS changes that part of the page to CSS display flex and then uses order properties to control the order of elements. So one possible fix for mobile is to add the proper CSS to control the order of additional info on mobile.

I'm not able to look into the situation at this time. I may be able to get to it in several days. In the mean time if anyone else wants to pitch in, please feel free.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

I checked by taking out that code, and in fact that is what is causing it to flip on mobile. I added an accordion for the additional information and removed the above code, and that seems to be making it look the way I want. Thanks so much for helping me make the additional info smaller!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...