Results 1 to 2 of 2

Thread: Media Query problem - website not resizing on mobile devices

  1. #1
    Join Date
    Aug 2005
    Location
    Dorset, England
    Posts
    46
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Media Query problem - website not resizing on mobile devices

    I'm trying to make my personal site responsive to mobile devices and have added media queries to my CSS, see below:
    Code:
    /*=====================================================
    Media Queries
    ================================================== */
    
    	/* Smaller than standard 960 (devices and browsers) */
    	@media only screen and (max-width: 959px) {
    	.wrap {max-width: 100%}
    	}
    
    	/* Tablet Portrait size to standard 960 (devices and browsers) */
    	@media only screen and (min-width: 768px) and (max-width: 959px) {
    	.wrap {max-width: 100%}
    	}
    
    	/* All Mobile Sizes (devices and browser) */
    	@media only screen and (max-width: 767px) {
    	.wrap {max-width: 100%}
    	}
    
    	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    	@media only screen and (min-width: 480px) and (max-width: 767px) {
    	.wrap {max-width: 100%}
    	h1 {font-size: 200%;}
    	h2 {font-size: 130%;}
    	aside {padding: 0 7px 0; float: left;}
    	article{clear:both;}
    	}
    
    	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    	@media only screen and (max-width: 479px) {
    	.wrap {max-width: 100%;}
    	h1 {font-size: 170%;}
    	h2 {font-size: 120%;}
    	nav {text-align: center; position:absolute; top: 132px; left: 7px; right: 20px;}
    	nav a {width: 31%; padding: 0.5em 0; border-bottom: 1px solid white;}
    	header {clear: both;}
    	aside {display: none;}
    	article{padding: 3.8em 8px 0;}
    	footer {height: 270px;}
    	footer section.links {width: 87%;}
    	footer section.links img{float: left;}
    	}
    	
    	/* OLDER Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    	@media only screen and (max-width: 319px) {
    	.wrap {min-width: 319px; max-width: 100%}
    	}
    While this works on the desktop browser when I resize it manually it doesn't when viewed on a phone/tablet?

    This is the website minus the gallery images:
    http://www.domcoleman.co.uk/responsive/


    So, to recap, when on my desktop and I resize the browser the content squashes up as required, but when loaded onto a phone/tablet it loads the whole 'desktop' version of the page. If you need to see more of the CSS or <head> in the HTML let me know.

    Many thanks,

    Dom

    If there is a delay in my repsonse, it prob 'cos I'm off line or gone to bed...

  2. #2
    Join Date
    Aug 2005
    Location
    Dorset, England
    Posts
    46
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Answer to my own question...

    I was missing this line of code in my <head>

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    I am using a very loose interpretation of the getskeleton model.

    So now the page re-sizes accordingly when loading directly to a mobile device (phone/tablet). The resize settings need to be tweaked as the menu doesn't break too well when viewed landscape on my Android phone in Opera Mini.

    Dom

Similar Threads

  1. Mobile Website Detection
    By jcdesigns in forum Other
    Replies: 3
    Last Post: 12-05-2012, 08:18 PM
  2. About Contact Finger on Mobile Devices
    By IrvingRami in forum JavaScript
    Replies: 2
    Last Post: 07-24-2012, 10:06 AM
  3. Smooth Navigational Menu for mobile devices
    By Cacho in forum Bug reports
    Replies: 2
    Last Post: 06-25-2012, 01:17 AM
  4. Mobile website using CSS
    By lowmarklow in forum Looking for such a script or service
    Replies: 1
    Last Post: 09-29-2010, 03:14 PM
  5. Website for Mobile Phones - Please Help
    By me_myself in forum Other
    Replies: 1
    Last Post: 11-25-2008, 01:20 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •