0

Here is a link to my website. It works ok and a-priori it also seams Ok on my phone, however, it shouldn’t be able to be scrolled left and right, IT’S ONLY SUPPOSED TO GO UP AND DOWN! I have a weird white part on the right of my site when using the phone. When I open the developer mode and put tablet mode and see the elements. I see that the body is only the "good part", the white part is not defined in the HTML so I cannot find the source of the problem.

My code is available in https://github.com/NEGU93/agustinbarrachina. I tried:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

As said here and here. I don't think the problem is related to the footer as it says here

It is also weird because I don't have this problem in the main site (home) so I believe the problem is in timeline HTML or CSS.

J Agustin Barrachina
  • 3,501
  • 1
  • 32
  • 52

1 Answers1

1

two issues: First is defining <i> element to have 600px instead of having 100%: https://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L274

the other one is simply adding overflow-x: hidden here: https://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L32

A good approach to find these overflowing elements, is using chrome developer tools to shrink the page width until that horizontal scroll shows.

then start removing elements from the dom by clicking them and hitting the DELETE key. the moment you see the horizontal scroll disappears, you CTRL+Z and drill down to its child elements where you do the same process untill you find the nasty element. then inspect its CSS props to find out why it does what it does.

Stavm
  • 7,833
  • 5
  • 44
  • 68