MartinMurray

@tuanphan This worked perfectly - Thanks Buddy 

Change this code
.header-nav-item--active a { background-image: linear-gradient(#5af5fa, #5af5fa) !important; padding-bottom: 5px !important; } to this
.header-nav-item--active>a { background-image: linear-gradient(#5af5fa, #5af5fa) !important; padding-bottom: 5px !important; }  

Try this
.header-layout-nav-center .header-nav-list { flex-wrap: nowrap; }  

Thanks, I was just overthinking it a little, Your snip was missing '}}'...

This works great.

/* Mobile resize code block */
@media screen and (max-width:767px) {
div#block-62452260eb439022d3cd {
    width: 50%;
}
}

Thanks 

Worked straight away without the need for finding the parallax-id. Thanks very much.

If you use Business Plan, Add to Page Settings > Advanced > Header
<style> @media screen and (max-width:640px) { [data-parallax-id="PLACE ID HERE"] figure { transform: none !important; top: 0 !important; bottom: 0 !important; will-change: auto !important; } } </style> If you use Personal Plan, add this to Home > Design > Custom CSS
Replace with Page ID. See How to find Page ID. 
@media screen and (max-width:640px) { #page-ID [data-parallax-id="PLACE ID HERE"] figure { transform: none !important; top: 0 !important; bottom: 0 !important; will-change: auto !important; } }  

OMG IT WORKED! I think I've been searching for this answer for over a year lol thank you guys sooooo much I am beyond ecstatic!

Hello,
You can add the horizontal scroll bar by removing the overflow property on the inner container and with the code that you already have on the Block-ID. Now you should see the horizontal scroll bar.
#block-yui_3_17_2_1_1635200644389_9550{ .sqs-gallery-design-carousel .sqs-gallery-container { overflow: visible !important; } }  

Fixed 😄

Add Code Block with this code
<div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { margin: 50px auto; width: 100px; } .mouse-icon { width: 25px; height: 45px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style>  

I just used a Gallery block which the Client was happy with. 

It looks like you solved this?

Add to Home > Design > Custom CSS
/* Product slide arrows control */ @media screen and (max-width:767px) { .ProductItem-gallery-carousel-controls { display: flex !important; } /* arrows background */ .ProductItem-gallery-carousel-controls * { background: white; } .ProductItem-gallery-carousel-controls>div { justify-content: center !important; } }