SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    @media recognized by laptop. but not by mobile

    Howdy all.
    studying up on responsive design. (& let me know if you know a site w/clear instructions/template on it/samples...whatever)
    and got my laptop to recognize the trigger so at 719px the page viewed changes format if you shrink down the browser.
    Why isn't the smaller format recognized by my droid?
    the site is www.thebigmeow.us. it's just got some lorem ipsum anyone knows why the mobile would not recon the @media & how I can fix it?
    thank you
    D

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Rather than set a fixed width on your content at lower screen sizes, consider something like width: 95%; margin: 0 auto;

    Also, place this in the head of your pages:

    Code:
    <meta name="viewport" content="width=device-width">

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you ralph and the
    Code:
     <meta name="viewport" content="width=device-width">
    you mean in the pages created in the wp-admin area correct? not the php ones in the theme folder like header.php.
    Code:
    @media only screen and (max-width:719px){
    body {
    //font-family:verdana, sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    background-color:#ddd;
    color:#fff;
    font-size:10px;
    	} 
    	
    #wrap{
    width:100%;
    }
    #headerWrap01{
    margin-left:0;
    }
    
    #preHeader{
    //width:970px;
    //min-height:40px;
    background-color:#fff;
    color:#000;
    border-bottom:1px solid #fff;
    }
    
    #logoTitle{
    height:150px;
    width: 100%;
    margin-left: 0;
    background-image:url('images/blackCatLogoXprnt.png');
    background-repeat:no-repeat;
    background-position:left; 
    float: none;
    }
    #logoTitle p{
    padding:0px 200px 0px 0px;
    margin-left:70px;
    }
    and that is what i have been using for sizing at the bottom of the page following up on a lynda.com tutorial. as you most likely saw I still have some issues. for example i can't seem to get just right the margin% for the title.
    what system do you use.
    i have for example .if the total width of the wrap is 970 say. & the title bos is 320. take 320 * 100 /970 and that gives you the size of the component. title box in this case.
    then you have to get and adjust a -% for the left margin....still figuring it out.
    feel free to dole out advice if you'd like.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Sounds too complicated to me. Once the browser window gets to a width of about 700px, the content boxes are set to a width of 320px, meaning there's a lot of space on the right. Set them to width: 100% or something like that.

    I just use my browser to test this stuff. Reduce the width of your browser (cChrome, for example) and you'll see what I mean.

    By the way, // is not a CSS comment. You need to wrap code in /* CSS here */ .

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    i used my browser as well. It works there but not on my smart phone.
    d

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    i used my browser as well. It works there ...
    Really? Do you actually want a big empty area to the right of your content?

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Sherpa

    I copied this message over from another thread where the poster had the same problem.

    Give it a look and test it out.

    If your iPhone is iPhone 4 or newer, you'll run into some problems with the using just media queries. This is because iPhone 4 and above have a "higher resolution" screen. Meaning to say 1px on the desktop doesnt equate to 1px on the phone. The actual iPhone 4 dimensions would be 640 x 960 instead of the usual 320 x 480 in the iphone 3.

    There's one way to fix this though, and that is to set the viewport initial scale to 1.

    Here's the code you have to place in the head of your HTML file.

    Code HTML4Strict:
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    Essentially, Ralph's suggestion should have worked.

    If you did not include the above line of code, you might want to check out http://viewlike.us for a view of the codes that would have appeared on your mobile device.

    If you included that in, use this instead. http://mattkersley.com/responsive/


    Hope this helps!

    Zell.

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi Zell thank you for that! Appreciated all the info.
    A quick question please.
    the
    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    in wp. do I want that in the pages created in wp-admin, or on the header.php?
    thx
    D

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    header.php

    Find the section that has this line of code

    <head>
    INSERT THE CODE ANYWHERE IN HERE (preferably nearer to the top and near all the other meta tags)
    </head>

    let me know if you can't find it and I'll show you a sample.

    Cheers.

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I meant to say that i can see the @media commands being enacted when I shrink the browser :-) not that i am ok w/the wide spaces and bad margins. working on 'em!

  11. #11
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Zev, hi, i'll just experiment.
    what i meant is this. in wordpress you have four main pages that determine the look of the pages the user would create in the wordpress admin section.
    the header.php index.php (or page.php & single.php) and footer.php plus the style.css
    the user can add some tags and code in the txt section of the word press pages in the admin area.
    so will try it in both and see what happens thank you!
    see image. My money is on "b" but will try both.wpAdminHead.jpg
    D

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yep, B is the one to go for.

  13. #13
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hey Zell. Back working on this project over the weekend. just another quick thank you for letting me know about those two sites.
    Really cool!

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries Sherpa, let me know if you have any other problems and I'll try to help.

    Although I'm not as good as Ralph and the others hahah.


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
  •