Additional info section for product - formatting

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!

URL for the store page?

http://www.cherrytreeinteriordesign.com/shop

For number one.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .ProductItem .ProductItem-additional {
  
    font-size : smaller;
    margin-top : 0;
    
    }
    
  </style>

Let us know how it goes.

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>

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.

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!