Hello, I have an issue displaying my website well on mobile phones. Despite the viewport tag which should do the trick, it's looking huge. Some tags are apparently forcing the website to appear too big. Any idea which one I should remove or modify? Thanks Franck
Whoa!! Tables for layout...what's this the 1990's?? you're never going to make that responsive, you need to start again.
The website was actually responsive at the beginning. Then I somehow added something that forced the website going double size. What about tables ? Big no, or is it possible to use percent for width instead of fixed pixel sizes ?
Tables can use % but I'm guessing from Malky's comment that you're using tables for layout and that's going to create huge problems. Converting to divs takes time but is worth it.
I used tables to create my website back in 2003. I liked the way it looked on a desktop, but it was horrible on a mobile device. I tried to modify the code to make it mobile friendly but couldn't get it to work. In my case it was too small. My Google ads looked like stamps on a mobile device. I had to completely re code my website using divs to get it to work. Try to re code a page using divs to see how it looks. If you like it use it as a template to re code the rest. Good Luck.
Thanks for your answer. After lots of testing, I finally found an easy way to display it well on Android and Iphones and desktop. I just added following tag : <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1, maximum-scale=0.55"> Can't pretend it would work in any case, but at least it prevents me to code everything again with div tags.
NO! do not F*** the visitors ability to zoom by screwing over the page with maximum-scale. Generally speaking given the subject matter of said site, you're BEGGING to get sued for accessibility failings with not just the tables for layout and endless pointless tables for NOTHING, but the general lack of semantics. That's not 2003 code, that's the worst of browser-wars era 1990's practices. Hell, the first line -- the tranny doctype -- says it all. Transitional -- quite literally meaning "in transition from 1997 to 1998 development practices". Images for text, no heading structure, no semantics, it's a giant middle finger to usability and accessibility. Things a pizza place should REALLY BE WORRIED ABOUT: https://www.cnbc.com/2019/10/07/dominos-supreme-court.html https://blog.investisdigital.com/dominos-pizza-accessibility-lawsuit/ https://www.nrn.com/news/supreme-co...-who-sued-domino-s-over-website-accessibility If Domino's can be raked over the coals what chance does a small business owner have? That home page is pretty simple... I'm waiting with my thumb up my backside for a client to get back to me... so tell you what: I'm gonna do one of my classic "rewrites with documentation" for you. And no, it's not "rewrite with DIV tags" -- this is 2020, we can do better. WAY better. <!DOCTYPE html><html lang="fr"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" > <link rel="stylesheet" href="screen.css" media="screen,projection,tv" > <title> Vite une pizza </title> </head><body> <header> <h1>Vite Une Pizza!</h1> <nav> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Info</a></li> <li><a href="#">Caddie</a></li> </ul> </nav> </header> <main> <p class="callout"> Livraisons à domicile et Vente à l’emporter! </p> <ul class="categories"> <li> <a href="#"> <img src="images/pizzaimg.jpg" alt="Pizza"> Pizza </a> </li><li> <a href="#"> <img src="images/pastaimg.jpg" alt="Pasta"> Pasta </a> </li><li> <a href="#"> <img src="images/boissonimg.jpg alt="Boisson"> Boisson </a> </li><li> <a href="#"> <img src="images/saladeimg.jpg" alt="Salade"> Salade </a> </li> </ul> <img src="images/scooter.jpg" alt="livreur sur scooter" class="trailingPlate" > Site Web : www.viteunepizza.ch<br> <br> Téléphone : 026 / 675 42 22<br> <br> Place de la foire 3 <br> 1580 Avenches </main> </body></html> Code (markup): Moving the menu to the top where it belongs from a usability and accessibility standpoint... I'd suggest using a webfont instead of the derpy "images for text" since again, this isn't 1997. That's the "proper semantics" to meet "accessibility minimums". Gotta eat soon, so it might be a few before I post some CSS to go with that. Styling it the markup may get a DIV or SECTION tag added, though that might not be necessary.
.. and here's that rewrite. https://cutcodedown.com/for_others/franck1972/pizza/template.html As with all my examples the directory: https://cutcodedown.com/for_others/franck1972/pizza/ Is wide open for easy access to the files. Don't worry about the copy stealing your search mojo as the /for_others/ directory is behind a noindex/nofollow robots.txt I provided a .txt for the final markup, which did add ONE DIV. The layout is fully responsive, requires less images, etc, etc. I didn't have whatever font was used in the images, but if you have that you should be able to swap it out fairly easily. The .rar in there contains all the files in their current incarnation. When I have time later tonight or maybe tomorrow I'll write up a section by section breakdown of both the markup and CSS. Oh, I also added some nice hover effects to aid in navigation.
It sounds like you’re dealing with some scaling issues on mobile. The viewport tag usually does the job, but if your website still looks huge, there are a few things you might want to check: Fixed Width Elements: Look for any elements (like images, containers, or tables) that have a fixed width set in pixels. These can cause the page to extend beyond the viewport, making it look oversized. Try changing these to a percentage-based width (e.g., width: 100%) or use CSS rules like max-width: 100% to make them more responsive. CSS Media Queries: Ensure that you have proper media queries set up in your CSS to adjust the layout for different screen sizes. Sometimes, missing or improperly defined media queries can lead to display issues on mobile. Meta Viewport Tag Configuration: Double-check your viewport tag. It should be something like <meta name="viewport" content="width=device-width, initial-scale=1">. Also, make sure it’s not duplicated or overridden by any other tags. Overflow Issues: Look out for elements that might be causing overflow (like wide images or large tables). Setting overflow: hidden on the body or problematic elements might help, but be careful as this can hide content. Fonts and Padding: Sometimes, large font sizes or excessive padding and margins can make things appear larger than intended. Make sure your styles for mobile adjust these properties accordingly. You can try using your browser’s developer tools (like Chrome’s DevTools) to inspect which elements are causing the issue and tweak them directly to see what works best. Hope this helps! Let me know if you need more specific advice! Good luck!