Fixed Responsive Design, Footers bottom of screen on mobile devices #… #15471
Conversation
| @@ -363,6 +363,21 @@ | |||
| // _____________________________________________ | |||
|
|
|||
| .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { | |||
| html, | |||
| body { | |||
| height: 100%; // Stretch screen area for sticky footer | |||
There was a problem hiding this comment.
Use height: 100% is a bad practice because content can be more than 100% and in this case, body block will not adaptive to content, it will be always 100% independent to content, that's is wrong.
There was a problem hiding this comment.
@VladimirZaets
I have checked with content and without content page I don't see any issue .
Can you see attached image.
If still you have any query then you attach issue screen shot. I will try to solve
There was a problem hiding this comment.
But in Safari and other browsers and cases. 'min-height: 100%` should be used.
There was a problem hiding this comment.
@DanielRuf
I have checked with 'min-height'.
If i will use 'min-height' then I can see some responsive issue. You can see attached
One more important thing there are use 'height: 100%' for desktop view.
I have checked in chrome, firefox and safari.
Right now I can't see any issue If you can see any isseu then please atteched screen short.
I will check it
Thanks
There was a problem hiding this comment.
If i will use 'min-height' then I can see some responsive issue.
Please elaborate what issue you see.
There was a problem hiding this comment.
After add 'min-height:100% you can see issue in screenshot ' footer is not touch in bottom.
|
@chirag-wagento Visually, it looks fine, but if you open browser developer tools and look to HTML, you will see that body is overflowed by inside content. If you add As @DanielRuf said, please use |
|
'min-height: 100%' is not working as I have mentioned in my above comment with screenshot. If I will use Overflow:hidden in mobile view can't scroll down to show content.
|
|
@chirag-wagento Exactly, this means that something went wrong in your design. All page content should be inside the body and body should be adaptive to content that is inside it. Also, I don't fully understand the problem with |
|
@VladimirZaets I have checked with min-height:100% OR height: 100%. You can see difference in screen shot if I will use min-height then footer can'n touch in bottom. min-height: 100% screenshot height: 100% screenshot I have used same css which one used in desktop view. I have just copy css in mobile view. I have tested whole site and it's working fine with height:100%. could you please test once from your side. |
|
Then the flex grow is not set correctly. See https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ https://dev.to/domysee/keeping-the-footer-at-the-bottom-with-css-flexbox-5h5f flex-direction column, grow and min-height (either 100% or 100vh). |
|
Any update in this PR? Thanks |
|
@chirag-wagento you still did not get rid of |
|
@orlangur I was try with height. Thanks |
|
@chirag-wagento I don't see a difference in the linked screenshots. There is example with |
…15118
Fix footer responsive issue
Description
Fixed Issues (if relevant)
Responsive Design, Footers do not snap to bottom of screen on mobile devices
Manual testing scenarios
Contribution checklist