Roger Roger - 17 days ago 8
CSS Question

Buggy Responsive CSS website


  1. Portrait mode on Iphone 7



https://i.imgur.com/gVjwYM7.png


  1. Landscape Mode:



http://i.imgur.com/M1IwCM2.png


  1. Rotating back to portrait mode:



http://i.imgur.com/pbkBVZB.png




Q: Why is this occurring? What can i do to fix this buggy responsive
CSS
? Background is using WRAPPER tag while form is by using materialize
css
.
Or should i make it just like this for mobile view? :

http://i.imgur.com/Y2RXUFi.png

JSFIDDLE LINK AS REQUESTED:
https://jsfiddle.net/9y0r0p2q/10/

Answer

The issue in the landscape screenshot appears to be that it has zoomed in by changing orientation and then you have scrolled the page.

The wrapper element is currently only set to be the height of the body/html element. Which is the height of the window, not the document. That is why the background is being clipped once you scroll any further than the height of the window.

This demo might make what's happening clearer. https://jsfiddle.net/20n6ag61/

To fix this you could try put the background on the body instead and adjust the height of html and body elements, like so.

html {
    height: 100%;
}
body {
    min-height:100%;
    background-image: linear-gradient(to right, #054f7d, #00a7cf, #efe348, #861a54, #054f7d);
    background-size: 600%;
    background-position: 0 0;
    box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.5);

    /* Animation */
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-name: gradients;
}

https://jsfiddle.net/9y0r0p2q/11/

I noticed also that you are using media queries, you may want to consider adding this meta tag to the head in your html

<meta name="viewport" content="width=device-width, initial-scale=1">
Comments