SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    727
    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,177
    Mentioned
    454 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
    727
    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,177
    Mentioned
    454 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
    727
    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,177
    Mentioned
    454 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 Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    727
    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

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


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
  •