Skip to main content
E
edinav24550678
Known Participant
November 1, 2022
Question

Scrolling problem with mobile device test - stuck behind footer

  • November 1, 2022
  • 2 replies
  • 1386 views

Dear all,

 

I seem to have a scrolling problem when I test my website for mobile devices in Google Chrome developer; The bottom of my 'aside' division remains stuck behind the footer (which is fixed) and won't move up any further. Obviously I've done something wrong with scroll and position-properties, how can I fix this?

Find my css style-sheet attached for references.

 

Thanks in advance for your advise,

Edina

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 1, 2022

    For quickest replies in this forum, post the URL to your online site so we can see it in our browsers.

     

    I'm not a fan of fixed footers because it removes them from the normal document flow.  That said, you might try 

     

    body {padding-bottom: 70px}  /**Adjust value as required**/ 

     

    Simplest solution: remove fixed positioning. 🙂

     

    Nancy O'Shea— Product User & Community Expert
    E
    edinav24550678Author
    Known Participant
    November 1, 2022

    Hello Nancy,

     

    The reason I made a fixed footer is because I wanted it to be visible at all times for contact-information.

    I'll try the body -padding-bottom first, and if that doens't work I will give the footer another position. Which is best, you think?

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 1, 2022
    quote

    I'll try the body -padding-bottom first, and if that doens't work I will give the footer another position. Which is best, you think?


    By @edinav24550678

    ===========

    No positioning.  Typically footers are not positioned.  They remain below content which is what all users expect.

     

    If contact information is important, place it in the header which has greater semantic importance than the footer.

     

    Example made with Bootstrap:

     

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    November 1, 2022

    I would probably try giving the aside a padding-bottom setting that's the same, or slightly larger than, the height of the footer.

    E
    edinav24550678Author
    Known Participant
    November 1, 2022

    Hello Jon Fritz II,

     

    I've tried, but it doesn't give the desired result. Shoudn't I change the padding-bottom of the 'contanier-fluid '(which holds the 'aside' row) instead?

     

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    November 1, 2022

    Frankly, I have no idea, but it's unlikely you would want to add it to a class that's being used in multiple locations. That would affect multiple elements across your page/site.

    Without seeing your html structure, it's all guesswork on this end. 

    Copy/paste your entire html into a forum reply (don't use email, it won't come through). Then, with the css you've already provided, it should be fairly simple for the contributors here to point you in the right direction.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices