1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Website displaying too big on mobile phones

Discussion in 'CSS' started by franck1972, Aug 20, 2020.

  1. #1
    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?
    SEMrush
    Thanks

    Franck
     
    Last edited by a moderator: Aug 20, 2020
    franck1972, Aug 20, 2020 IP
    SEMrush
  2. malky66

    malky66 Acclaimed Member

    Messages:
    3,878
    Likes Received:
    2,199
    Best Answers:
    85
    Trophy Points:
    515
    #2
    Whoa!! Tables for layout...what's this the 1990's?? you're never going to make that responsive, you need to start again.
     
    malky66, Aug 20, 2020 IP
  3. franck1972

    franck1972 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    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 ?
     
    Last edited: Aug 20, 2020
    franck1972, Aug 20, 2020 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    26,537
    Likes Received:
    3,995
    Best Answers:
    111
    Trophy Points:
    665
    #4
    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.
     
    sarahk, Aug 20, 2020 IP
  5. R.G. Ramsey

    R.G. Ramsey Greenhorn

    Messages:
    20
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    8
    #5
    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.
     
    R.G. Ramsey, Aug 21, 2020 IP
    sarahk likes this.
  6. franck1972

    franck1972 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    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.
     
    franck1972, Aug 26, 2020 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,421
    Likes Received:
    1,889
    Best Answers:
    246
    Trophy Points:
    515
    #7
    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.
     
    deathshadow, Aug 29, 2020 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,421
    Likes Received:
    1,889
    Best Answers:
    246
    Trophy Points:
    515
    #8
    .. 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.
     
    deathshadow, Aug 29, 2020 IP
    malky66 likes this.