HTML/CSS help

Telesphoreo · September 12, 2021 at 6:31 AM

So I've been stuck for a while on this. Basically I can't even get a basic page working. If you go to https://telesphoreo.me on a desktop, you'll see that the footer looks fine. But if you go to a mobile device the footer looks cut off. The height appears to be fine though which is weird. I've tried fiddling with the height and switching it from px to vh as someone suggested. I tried fiddling with a million things but this is the only way I can actually even get it to the bottom for some reason. Any idea of what I should do? I'd also like it to be modular so I can comment out the footer and it doesn't show, but I can also uncomment it if need be. So I want it to be flexible, but I cannot seem to get it to be responsive. I also tried using Bootstrap but the problem was that you would have to scroll down to see it. It didn't cover the page like this header does (I think?), it just put it after absolutely everything else. Obviously Bootstrap would be better but regardless I have no idea how to fix it. Does anyone know how to fix this? Also is it just me or does the text look a little bit too high??

Telesphoreo · September 12, 2021 at 6:46 AM

HTML

<!DOCTYPE html>  
<html>  
   <head>  
      <meta name="viewport" content="width=device-width, initial-scale=1">  
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">  
      <style>  
         body, html {  
         height: 100%;  
         margin: 0;  
         background-color: #201F1F;  
         }  
         img {  
         display: block;  
         margin-left: auto;  
         margin-right: auto;  
         }  
         .footer {  
         position: fixed;  
         padding: 10px 10px 10px 10px;  
         bottom: 0;  
         text-align: center;  
         color: white;  
         height: 6vh;  
         width: 100%;  
         background: #363535;  
         }  
      </style>  
   </head>  
   <body>  
       <img src="assets/telesphoreo-transparent.png" alt="Telesphoreo" style="width:45%;">  
       <div class="footer">  
         <p>This is a test footer. Stuff goes here. Blah blah blah. It cuts off though. No idea how to fix it.</p>  
      </div>  
   </body>  
</html>

Display More

This is the code

Tozzit · September 12, 2021 at 11:25 AM

doesnt seem to be anything wrong with it? i can see the footer on mobile on safari and chrome, the problem you get is that these mobile browsers have footers built in with icons on them in both cases, although safaris disappears, i would recommend having the footer as just absolute instead of stickied and if you really want to have it all on one page, just reduce the height of the main thing, also dont get why you added style onto the html image element if you are just gonna have a seperate css for it anyway

edit: if you really wanna keep the sticky you can just check for mobile and check for the browser but its alot more effort than just putting it as an absolute

**StevenNL2000** · September 12, 2021 at 12:17 PM Best Answer

Removing height from .footer altogether fixes it for me. After that, you might want to consider margin-bottom: 0 on p to get rid of the space below it.

Telesphoreo · September 12, 2021 at 8:55 PM

↩ StevenNL2000 The margin-bottom: 0 was what I needed, thanks. I wasn't sure how to get rid of that gap without the height but that fixed it.

↩ FromTimeToTime Yeah, I noticed it looked bad on mobile also. Not sure how to fix that. It actually should be centered like it is on desktop, but it goes to the top on mobile for some reason.

**StevenNL2000** · September 12, 2021 at 9:06 PM

Quote

↩ Telesphoreo ↩ FromTimeToTime Yeah, I noticed it looked bad on mobile also. Not sure how to fix that. It actually should be centered like it is on desktop, but it goes to the top on mobile for some reason.

It is actually at the top on desktop as well, you just don't see it because desktop screens have more width while mobile screens have more height.

HTML/CSS help

wild1145 July 16, 2022 at 11:47 PM

wild1145 November 2, 2022 at 6:25 PM

wild1145 November 2, 2022 at 6:46 PM

Users Viewing This Thread