SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css width weirdness on mobile

    Hi:

    Code:
    @media screen and (min-width: 501px) and (max-width: 800px) {
    
        #wrapper {
    	width: 625px; /* was 775 then 675 now -25 from that - friggin weird */
    	max-width: 625px;
        }
    }
    @media screen and (min-width: 150px) and (max-width: 480px) {
    
        #wrapper {
    	width: 350px; /* was 450px */
    	max-width: 350px;
        }
    }
    The above code worked just fine when I resized the browsers on the desktop but not perfect on some phones I tried. http://www.magicfixpc.com

    The original 775px that worked on the desktop was down from the original 800px that I tried - looks like the vert scrollbar was being counted as part of the width.

    My HTC Inspire has a 480x800 screen and the above code is what it took to get it to display right in either orientation. Notice I'm subtracting 150px in horiz mode and 100px in vertical mode. Not exactly a constant or even linear

    <code>350/450 != 625/775</code>

    Today a friend tried it on an SG III and it looked perfect in the screenshot he sent. That wass before I made the above changes. The SG III has a res of 720x1280. I guess the SG III was smart enogh to stretch it to fill the screen.

    Before the change, on the default HTC android browser (webKit?) you couldn't see the girl with the laptop. After the change, you could but firefox always looked bigger and it still does, it cuts her butt off right where the crease of her thigh stops. Sux cuase she's kinda nice looking 8)

    Any Ideas what the major malfunction is here?

    TIA
    Mike

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    With the caveat that I've never coded for @media... try these parameters and see what happens. They seem to work for me in Firefox on the desktop.
    Code:
    @media screen and (min-width:641px) and (max-width:974px) {
        #wrapper {
            width: 625px;
            max-width: 625px;
        }
    }
    @media screen and (max-width:640px) {
        #wrapper {
            width: 350px;
            max-width: 350px;
        }
    }

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no problem with firefox on the desktop. The problem is firefox is different than the default browser on the phone and the fact that I have to set css width to 350px to display on a 480px phone screen and all that other info/detail i put in my post. How would changing the @media min max ranges help?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Not surprisingly, I was out of the ballpark on your issue.

    Perhaps this link will help: http://www.w3.org/TR/css3-mediaqueries/

    Let us know how you resolve the problem. Curious minds want to know <smile>.

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup. right there in section 1. "Even illiterates have been calling you when they see your print ad. You don't need a website. You also need to stop buying from sitepoint and especially refrain from posting there."


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
  •