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
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:
<meta name="viewport" content="width=device-width">
Thank you ralph and the
<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.
@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.
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 */ .
i used my browser as well. It works there but not on my smart phone.
d
Really? Do you actually want a big empty area to the right of your content?
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.
<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.
Hi Zell thank you for that! Appreciated all the info.
A quick question please.
the
<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
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.
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!
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.
D
Yep, B is the one to go for.
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!
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.