Bilash

Glad to help you solve the problem! 🙂

Hi @Callan I think the template you are using there is an issue scoping their CSS custom properties (variables) that's why it's not working out the way you want it to. Anyway, here is a CSS snippet that you can insert into your site to make it look like you wanted. [data-section-id="6576c31ac1a71b16fb46c67c"] .course-list__grid-item.course-list__grid-course-item { --course-list-grid-layout-course-item-text-color: #ffffff; --course-list-grid-layout-course-item-background-color: #232323; /* for subtle hover animation */ transition-property: background-color, color; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0; transition-behavior: initial; } [data-section-id="6576c31ac1a71b16fb46c67c"] .course-list__grid-item.course-list__grid-course-item:hover { --course-list-grid-layout-course-item-hover-background-color: #c3876a; --course-list-grid-layout-course-item-text-color: #000000; } Final look:

Hi @Nancygallardo562 I forgot to update the selectors. Here is the updated CSS snippet. @media screen and (max-width: 640px) { .sqs-announcement-bar #announcement-bar-text-inner-id p { white-space: nowrap !important; } }

Hi @Nancygallardo562 The solution is quite simple but took me quite a long time to find. Anyway, you'll need to add a little bit of custom CSS. @media screen and (max-width: 640px) { #announcement-bar-text-inner-id .sqs-announcement-bar p { white-space: nowrap !important; } }

Hi @grimm 3rd party APIs can be conneccted via custom code only. I can help you achieve that feaure in your site. Can you please share a bit more details? Thanks, Bilash.

Hi @Yorgos Your image looks fine on my mobile and desktop devices though.

Hi @Cristina_VersoVisual I think this needs further investigation with your website and code injection.

Hi @Cristina_VersoVisual Here is the full replacement for the Footer code injection (the image you shared for line 1-18) : <script> jQuery(document).ready(function ($) { $('section.ProductItem-additional').insertAfter( '.ProductItem-details .sqs-add-to-cart-button-wrapper' ); $('section.reviewsSection').insertAfter( '.ProductItem-details .sqs-add-to-cart-button-wrapper' ); }); </script> <style> section.ProductItem-additional { order: 6; } </style>

Hi @Cristina_VersoVisual Unfortunately, you've removed the code block I sent you. You were supposed to include both of them. I just corrected the previous faulty code that you had initially.

Hi @Yorgos Is it possible for you to share your page URL?

Hi @datclaiborne Your H1 header font size is 28px currently for the desktop devices. If you want all of your desired titles to look the same on every page then you can add the following CSS: #logo .logo.site-title, .eventlist-title .eventlist-title-link , .eventitem-column-meta .eventitem-title { font-family: proxima-nova !important; font-weight: 700 !important; font-style: normal !important; font-size: 28px !important; line-height: 1.2 !important; }

Hi @Miicherey The button can be added using custom code or editing the template since you have v7.0. Once added to the page then it can be placed at the exact place you wanted.

In that case, here is the corrected version for that block: <script> jQuery(document).ready(function($) { $('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper'); }); </script> Please let me know if you need further help.

Hi @Cristina_VersoVisual, Please remove these lines. You've a syntax error here. Please let me know if it works after that.

You're quite close. Here's the jQuery code with updated selector: jQuery(document).ready(function($){ $('section.reviewsSection').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper'); }) The result: