Lorem ipsum dolor sit amet, consectetur adipiscing elit

Hello everyone,

I’ve built a website using only HTML / CSS / JavaScript, with a little of Jquery, ScrollMagic and GreenSocks.
I don’t know why but when i’m using Chrome Console, there a strange offset happening, i’ve searched for hours.

here is the source code (codepen) : https://codepen.io/Ziratsu/pen/PXmJgZ
Since it’s a codepen there are no issue when hopening the console, you need to create a folder and try it out on chrome console…

When i go under 768px, there is this weird offset.
Here are my toughts, it maybe is a problem with greensock/scrollmagic/jquery, but when I remove them, I still have this issue, but it’s less huge(the offset is tinier).
And it has disapeared but back some hours ago I had the “violation” issue : https://github.com/angular/material2/issues/4221

But now the console is crystal clear, 0 problem on it.

I’m hoping that i’m readable and hopefully someone can enlight me on that point.
Than’ks to the hero/heroine who could help me!

Not sure if this is what you are seeing but, .contactHeading is overflowing the page, give the parent container .footerContenu a width of 100% (at least on the Codepen code this is happing).

Hey, thank’s for the reply !
But actually there is no .contactHeading, there is only a #contactHeading and there is not dimesions properties associated with,

#contactHeading {
letter-spacing: 1.25rem;
font-family: ‘Abril fatface’, sans-serif;
font-size: 6.5rem;
line-height: 5.75rem;

Maybe were you talking about something else?

If you want to see the issue, i’ve published it on gitHub, you can see it opening the console and going under 1000px with “toggle device toolbar” on the upper left!


Yes, I meant the id #contactHeading (just a habit I guess, I avoid using ids for CSS styles).

If you give a width of 100% to the h3 #contactHeading parent container (the .footerContenu div) the overflow will go away.

.footerContenu {
  width: 120rem; /* remove this */
  width: 100%;  /* add this */
  max-width: 120rem; /* add this to constrain */

To make it look the same on small screens, you will then also need to adjust the width for the inputs and textarea in the 768px media query. I actually think you can just remove the width you set there and keep the one set in the 992px media query, but that is up to you.

Yep thank’s, it was actually part of the problem, i’ve put a 120rem by mistake,
And for the other part, it’s just that the ScrollMagic Library don’t really like my absolute positionning boxes and mess things up when it comes to responsiv,
Thank’s for your time !

Thanks for the help,i too has problem like this