0

I'm making my site, www.cocktailcodex.net, useable with the phone. However I'm running into an issue with the footer. When you are at the bottom and just keep scrolling, the footer and main div begin to float over, or away from each other, and I can't find the origin of the problem, or the solution to it.

This only happens on mobile and not in pc (f12) developer tools.

CSS:

:root {

    --mainColor: rgb(255, 153, 28);
    --hoverColor: rgb(245, 143, 18);
    --backColor: white;
    --divColor: rgb(249, 224, 175);
    --divHoverColor: rgb(239, 214, 165);
    --darkText: black;
    --lightText: white;

}

@media (min-width:320px)  { 
/* smartphones, iPhone, portrait 480x320 phones */ 

:root {
    --a: 50px;
    --b: 60px;
    --c: 80px;
    --d: 32px;
    --e: 100px;
    --f: 30px;
    --g: 35px;
    --h: 70px;
    --cocktailmargin: 1%;
    --sidebar: 40%;
    --content: 55%;
    --sbwidth: 75%;
    --bwidth: 30%;

    --basecurve: 30px;
    --basenavheight: 160px;
    --basesearchwidth: 60%;
    --basesearchheight: 100px;
    --baseiconsize: 150px;
    --basedropsize: 100px;
    --basesearchloop: 100px;
    --basedropleft: -300px;
    --basedropmin: 410px;
    --basedroppad: 10px;

}

}

@media (min-width:481px)  { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @     
640 wide. */ 
}

@media (min-width:641px)  { 
    /* portrait tablets, portrait iPad, landscape e-readers,     
landscape 800x480 or 854x480 phones */ 
}

@media (min-width:961px)  { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
}

@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
}

@media (min-width:1281px) { 
    /*

hi-res laptops and desktops */ 

:root {
    
    --a: 20px;
    --b: 30px;
    --c: 40px;
    --d: 16px;
    --e: 50px;
    --f: 15px;
    --g: 20px;
    --h: 20px;
    --cocktailmargin: 5%;
    --sidebar: 40%;
    --content: 55%;
    --sbwidth: 75%;
    --bwidth: 30%;
}

    
}

@media (min-aspect-ratio: 21/9) {
    :root {
        --cocktailmargin: 20%;
        --sidebar: 35%;
        --content: 60%;
        --sbwidth: 80%;
    }
}

@media screen and (max-width: 300px) {
    #settings .cancelbtn, #settings .deletebtn {
       width: 100%;
       border-radius: 10px;
    }
}

* {
    margin: 0px;
    font-family: 'Quicksand';
    -webkit-tap-highlight-color: transparent;
}

html {
    background-color: var(--backColor);
    height: 100%;
    overflow: auto!important;
    max-height: 100% !important;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto!important;
    max-height: 100% !important;
}

/* CSS for extra things */

/* Footer */


footer {
background-color: var(--mainColor);
position: relative;
clear: both;
text-align: center;
color: var(--lightText);
padding: 50px 0px 50px 0px;
flex-shrink: 0;
}

footer p {
    color: var(--lightText);
    font-size: var(--g);
}

HTML:

<body>

<nav class="sticky">
    
    <!-- header items like searchbar -->
    
</nav>

<div id="main">

    {% block main %}


    {% endblock %}

</div>

<footer>
    
    <p>Copyright &#169; 2023 CocktailCodex All Rights Reserved</p>
    <p>Contact info@cocktailcodex.net</p>
    
</footer>

<script src="{{ STATIC_URL }}/static/script.js"></script>

</body>

I tried adding overflow and max height, to restrict any extra height, but it didn't work either:

footer {
background-color: var(--mainColor);
position: relative;
clear: both;
text-align: center;
color: var(--lightText);
padding: 50px 0px 50px 0px;
flex-shrink: 0;
overflow: auto!important;
max-height: 100% !important;
}

but didn't make a difference.

kersjan14
  • 1
  • 1
  • Its hard to help without seeing your code.You have a better chance of getting help with a minimal reproducible example https://stackoverflow.com/help/minimal-reproducible-example – ian worsley Mar 31 '23 at 19:50
  • Is it the slight bounce at the bottom when you scroll that is your problem? If so remove overflow auto from #main{ } and add padding: 20px 20px 40px 20px; let me know if this helps. – ian worsley Mar 31 '23 at 20:52
  • @ianworsley unfortunately it didn't help, when I keep scrolling the page keeps floating strangely. if you go to cocktailcodex.net on your phone you will see what i mean. its hard to descrive – kersjan14 Mar 31 '23 at 21:09
  • I see it. But its hard to help because i cant debug in chrome dev tools it doesnt happen have you tried removing the overflow: auto!important; max-height: 100% !important; from the html and body? – ian worsley Mar 31 '23 at 21:28
  • @ianworsley yes I only added as possible solution, but it didn't work so I deleted it. In debug it doesn't happen indeed so its really difficult to debug. – kersjan14 Mar 31 '23 at 21:33
  • Try wrapping your content in a div inside the body and removing flex from the body and applying it to the wrapper. – ian worsley Mar 31 '23 at 21:50
  • @ianworsley, I tried that, but didn't change anything other than that the div background doesn't extend completely – kersjan14 Apr 01 '23 at 17:53

1 Answers1

0

Remove max-height: 100% !important; and add height: 100% !important; will solve the issue.

ashirhusaain
  • 255
  • 2
  • 6