CODEWITHSUNDEEP
htmlcss
Oscar Lingard
Oscar Lingard

Reputation: 49

On mobile screens, I have a disappearing white unwanted border

this is the outline of my problem. On my website when you view it on mobile platforms, initially there is a large white border which you can scroll into which is unwanted. Obviously, I have implemented the code:

html, body {  margin: 0px;  padding: 0px;}

body {
  font-family: "Josefin Sans";
  width: 100%;
  height: 100%;
}

The kicker is that, once you scroll past the achievement section, the white border which is causing my issues disappears.

My question is, how do I remove this white border from the initial website? I have tried viewing the website on both the latest versions of chrome and safari on my iPhone and on the Android system.

Thanks for your time and I apologize if you need any extra code or if the answer is simple as I am a beginner programmer.

Upvotes: 1

Views: 234

Answers (1)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

This is being caused by the slide-in content that is being shown as the user scrolls down the page. Even though you cannot see it (opacity:0) the browser is still rendering the content, just off to the right of the screen. I'm not sure which property you've set to stop the page from zooming onto the body, but the end effect is that you can see the white border where the content comes out to.

The content you are hiding/showing is contained within a widget with the class 'timeline'. Add overflow:hidden to the .timeline css:

.timeline {
    margin-top: 8.75rem;
    overflow: hidden; /* New property */
}

Upvotes: 1

Related Questions