That’s because mobile devices shrink to fit if they don’t have the proper media query. Add this in and it will allow the browsers device width to be used (which will trigger mobile since it’s small)
This is a step in the right direction. This is how you should be coding. Give it a shot. You need to be coding like this. Long gone are maintaining multiple sites for diffferent screens.
<meta name="viewport" content="width=device-width,initial-scale=1">
PERFECT! That works fine.
Can I also just ask you how you got the images to appear underneath one another at http://codefundamentals.com/portfolio.php for the mobile site?
Matt.
Each picture is contained in a <li> which is a block element. So for big screens I float them left and make the width small enough to fit 3 per line. 33% or something (I think I do 32% and 1% margin IIRC). So then the image I made 100% height and width so it shrinks/expands.
Then when it comes to small screens, I simply unfloat the <li>'s so it appears once per line. Then I center it on screen. The main thing is just htat I unfloat it. Don’t overthink it 
OK - Thanks - I’ll use that technique.
By the way, is there any way of ignoring the @media CSS code? i.e. for using a SEE FULL DESKTOP VERSION OF WEBSITE link?
Matt.
I mean I guess you could use PHP here or some other server language.
site.com/index.php?mobile=false
On mobile sites, give that link ONLY for mobile.
You can probably just move your media queries to a separate external CSS file (not combined with your large screen code). Then use PHP to ONLY include that file IF the mobile GET variable is not found. I’d do it like this
if(!isset($_GET['mobile']))
{
//display mobile stylesheet
}
So only the home page would have to be PHP and the rest of the site would remain html?
Matt.
I made adjustments to my post. I see you’ve been reading it. Please make sure you read the updated post.
And your entire site could have the .php extension.
If you have no need for PHP elsewhere, then sure just use .php on homepage and .html elsewhere
BUT if you wanted the link to mobile idea you mentioned on all pages, You’d need PHP everywhere.
I think I would have automatic recognition of mobile devices on all pages (page width with @media).
The link to the desktop version of the site would only go to the homepage.
So that means only the index page needs to be php. This is correct, right?..WRONG! However when someone clicks to go to another page it would show the mobile site again! Sounds a bit complicated. I will probably limit users to only being able to use the mobile version…this is what you do, right?
Matt.
Did I not just mention this possibility?
Yes that’s what most people do. An option for Desktop version is just icing on the cake. Actually, I assume that if people would want the desktop version…you could just only add in the meta tag if people clicked that link. Instead of including/excluding the CSS file, just include/exclude the meta tag.
OK - I will only offer customers the mobile site if they are using a mobile device.
Thanks for your help on this. I’ll see how I get on and post again if I get anything else crop up… thanks.
This really is the wrong approach for small to medium sites. These days there’s not a ‘desktop site’ as such because of the myriad of devices out there and indeed should I close the window on my desktop site I would want the content to fit in the window and not be squashed or have a scroll bar present. Remember there are many tablets out there now that range from very small to almost desktop size so this is not just a mobile versus desktop question.
Just design for all devices by creating a flexible layout and throw in a media query when the design looks awkward or doesn’t fit. With a few well placed media queries and a well structured html you can accommodate all devices without ever knowing anything about them. No need for separation of code or multiple device chasing. You can remove content in the smaller screen version but think carefully about why you are doing this. If the content wasn’t important then why include it in the main site?
Planning is the key but keep it simple also.
Ryan,
I am redeveloping my website and I currently have a <div id="navigation"> which has a width of 970px. I need this to change when using a mobile device (with less in the navigation bar). I tried removing the width completely and the navigation will not display inline now. Do you know how to either change the width of the navigation div in the @media or can I display:inline; without specifying a width of the div?
Matt.
Matt,
Let’s think this through.
By default, on all screens, small through extra large, the width is 970px (it should be a fluid value and not px but that’s another day…)
So no matter what, you will get 970px. Now, you want to change the value or remove it for mobile. How do you do this? Think this through. You still need to understand media queries. You obviously can’t remove the default 970px for all screen sizes. That’s not hte answer. That breaks everything.
Hint: Update the value in the media query. BUT TO WHAT? Not another pixel value. Not percentage. Not em. Not any value based answer.
Think it through and give me your answer.
is it max-width? I do not know how I would code it though. But max-width would make it 575px as stated in the @media.
Have you considered width:auto? auto is the default value for width so it would revert back to “not having a width” (so to speak) in mobile.
That seems to be working:
#navigation1{
width: auto;
display:inline;
}
I had to remove float:left; because the links were not displaying in a horizontal row.
See, already customizing. You are on your way to becoming an expert . Welcome to the world of responsive design. THIS is what you should be doing for websites. Ideally you shouldn’t need many media queries. Your entire site should basically be fluid and it should shrink down pretty well without queries. However, customizing (like I did with my portfolio page it make it single column) is good to make it more aesthetically pleasing.
tl;dr - make site fluid, and do queries where needed to make mobile view more enjoyable.
You shouldn’t need the width:auto; if you are making it display:inline. If it is inline, then it won’t accept a width to begin with. No matter if it’s set already. It’s now an inline level element and they don’t recognize widths. Try removing width:auto;. Just nitpicking - you got it working
in the small navigation bar the clickable areas/button are bigger but I would like them a little larger.
Is there a mobile button size setting or should I adjust in by changing the pixels in @media?
Matt.
You’d need to manually go into the query and change the (pixel/percent/em/rem) value. There are no preset size settings, unless you look into frameworks, which I’m not sure if you need or not (you seem to be getting along fine without it, and I’d recommend you not do it for this site so you can learn more.)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.