Custom Code is interfering with REM value

Hey! So I used the following custom code to make my horizontal cms slider work, but today I changed all of my text from px to rem and for some reason this code is making all of the rem texts unbelievable big. Now I know it is because of this section: css('font-size', moveDistance + 'px'); but I still have no idea how to fix it.

<!-- Horizontal Scroll -->
<script>
function calculateScroll() {
let itemsInView = 3;
let scrollSpeed = 0.9;
if (window.matchMedia('(max-width: 479px)').matches) {itemsInView = 1;scrollSpeed = 0.9;} 
else if (window.matchMedia('(max-width: 767px)').matches) {itemsInView = 2;scrollSpeed = 0.9;}
else if (window.matchMedia('(max-width: 991px)').matches) {itemsInView = 2;scrollSpeed = 0.9;}
let horizontalItem = $('.tickets-cms-item');
let horizontalSection = $('.page-tickets-wrapper');
let moveAmount = horizontalItem.length - itemsInView;
let minHeight = (scrollSpeed * horizontalItem.outerWidth()) * horizontalItem.length;
if (moveAmount <= 0) {moveAmount = 0;minHeight = 0;}
else {horizontalSection.css('height', '200vh');}
let moveDistance = horizontalItem.outerWidth() * moveAmount;
	$('html').css('font-size', moveDistance + 'px');
  horizontalSection.css('min-height', minHeight + 'px');}
  calculateScroll();window.onresize = function(){calculateScroll();}
</script>

Thanks in advance!

With kind regards,
Tim Sijtema


https://preview.webflow.com/preview/dockfec?utm_medium=preview_link&utm_source=designer&utm_content=dockfec&preview=d55716f532dda39e25a5fcd88bb87889&pageId=61d82bf7a0c3416551b0f10d&workflow=preview

Bumping this thread , I’d really like to move on with the next thing and fix this thing… It’s driving me nuts. So if anybody is willing to help me it would be appreciated.

If you need any info, just reply on this thread.

Thanks in advance!

With kind regards,
Tim Sijtema

By the way, you are correct about the reason, but I’m not sure what is the use of that. Why are you setting font size for the HTML here?

Now about rem unit, what you should know is that it is dependent to root HTML. By default browser font size is 16px, now anywhere you apply font size as rem unit on the body or any element inside body it will be relative to that 16px.

That mean if you apply 1rem technically it is 1rem x 16px = 16px, similarly if you apply 2.5rem that is 2.5 x 16 = 40px. Now the benefit is that, when you apply the font size on HTML let’s say to 14px, now 1rem is 1 x 14 = 14px and 2.5rem is 2.5 x 14 = 35px.

So you said previously you were using px, now px is dependent on where it is applied so font size applied on the HTML didn’t made any effect. But as you changed it to rem font size of the HTML affected those elements.

I’m not sure why are you applying font size on HTML but if you really need to use it, above are the things you should keep in mind.

And to not have this issue I’d simply remove that line from your script.

Thanks @abirana for the answer… To be honest, I got no clue why this line is in the code, but it does have a use. When I removed this line, the rem text is fixed, but now the horizontal scroll is not working… :frowning:

I didnt create the code for myself I used it from this tutorial, but he isn’t answering comments.

<!-- Horizontal Scroll -->
<script>
function calculateScroll() {
let itemsInView = 3;
let scrollSpeed = 0.9;
if (window.matchMedia('(max-width: 479px)').matches) {itemsInView = 1;scrollSpeed = 0.9;} 
else if (window.matchMedia('(max-width: 767px)').matches) {itemsInView = 2;scrollSpeed = 0.9;}
else if (window.matchMedia('(max-width: 991px)').matches) {itemsInView = 2;scrollSpeed = 0.9;}
let horizontalItem = $('.tickets-cms-item');
let horizontalSection = $('.page-tickets-wrapper');
let moveAmount = horizontalItem.length - itemsInView;
let minHeight = (scrollSpeed * horizontalItem.outerWidth()) * horizontalItem.length;
if (moveAmount <= 0) {moveAmount = 0;minHeight = 0;}
else {horizontalSection.css('height', '200vh');}
let moveDistance = horizontalItem.outerWidth() * moveAmount;
	horizontalSection.css('min-height', minHeight + 'px');}
	calculateScroll();window.onresize = function(){calculateScroll();}
</script>

If your code was working before then it should work now as well, because that code doesn’t make any effect on your slider elements. It is just applying font-size to HTML, I checked live site of that tutorial and font size is applied to HTML and other elements have px, if you inspect and apply rem unit somewhere it will have same issue. I’m still unsure why it is there, I’m not sure if I’m missing anything.

I think you’ve more custom codes on your page which has errors so this code is not being executed because it is behind them. To test only this one, remove others and test for once or move it up in the script.

For now I can’t go in-depth on other issue but it seems you are including jQuery on your custom code, which most probably should be the reason; because Webflow comes with integrated jQuery itself. So you should remove it and test.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>

Hey @abirana Removing this does clean up the code, but I’m 100% sure it has nothing to do with the other scripts. If I add $('html').css('font-size', moveDistance + 'px'); back and remove the rems it is a working horizontal scroll element and when I remove the horizontal scroll code and add the rems the text is all correct aswell.

Either way I did remove the jQuery, but it didn’t change anything at all for the horizontal scroll.

@abirana I did forget to mention in the global styles embed there is this which does effect the horizontal scroll aswell

 <!-- Horizontal Scroll -->
<style>
.tickets-trigger {height: calc(100% - 100vh);}
</style>

@abirana I’ve made two pages and moved the custom code to the page settings from “test” “test2”

test is the one without $('html').css('font-size', moveDistance + 'px');

test2 is the one with $('html').css('font-size', moveDistance + 'px');

The only one that is working is the “test2” page. Nothing is different except for the code.

Ok now I understand why that code is there, actually I hadn’t checked scroll setting on your project.

Timothy Ricks has done some great trick for the workaround here, amazingly used font size for this :+1:.

By the way, setting font size on HTML he is actually storing that value to be used on the Scroll interaction, because there is no direct way to use it with Webflow’s interactions.

But still we can have a better option instead of applying font size to the root HTML, because now we know we can’t use rem unit if we do that.

This workaround is simple, instead of applying font size on the HTML; we should apply it on the tickets-sms-list itself or to its closest parent. Because tickets-sms-list is the block where interaction is happening. Now on the previous line that you removed, change ‘html’ to ‘.tickets-sms-list’ like below

$('.tickets-sms-list').css('font-size', moveDistance + 'px');

After that go to your scroll interaction settings, there you have values set on rem; now just change it to em unit for both actions and you’ll be good to go.

Now that we’ve set em here, you’ll have same effect because em is relative to the font size of its parent and not to root HTML. And now you can use any unit everywhere, because font size on tickets-sms-list will only effect its child elements and also only if you use em on them.

Please try and let me know.

You’re a lifesaver!! Thank you @abirana!

If you have any spare time left to help me out i got another open bug on my site: Finsweet Cookies - Pop Up If not it’s totally fine, you’ve been a great help already either way.

Already had to solve many bugs and this is the last one I have so I’m always really relieved when a bug is resolved xD

I took out some time and check the other issue, please check my reply there.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.