I am working on two different responsive websites (both work in progress and one is taken from lynda.com just for practice). This first one I did works fine as far as I can tell.
The HTML is HERE and CSS is HERE.
Then I started to work on this one, created the same css as above but the media query targeting #media only screen and (max-width: 768px) is not loading for some reason.
HTML is HERE and CSS is HERE.
I've spent hours trying to figure out why and I'm lost. I don't any differences between the two, yet one is working and one isn't. Any suggestions you have would be much appreciated!
I'm just testing them in a browser right now.
Thank You!
I think the issue is one site has a "meta...viewport..." in its HTML, while in the other site that statement is commented out.
In the site with no "meta...viewport..." the Media Queries are actually testing against the dimensions of the unconstrained "viewport" rather than the "screen" (an oversimplification is "devices sometimes lie"). On the other hand in the site with "meta...viewport...width=device-width" the "viewport" width is forced down to be the same as the "screen" width before the Media Queries test it, so you get different answers (especially on smaller devices).
(Depending on what devices you're targeting, you may need to dive down into thoroughly understanding a "viewport". There are good reasons for the way a "viewport" behaves; please don't misinterpret my sarcastic "devices sometimes lie" to mean "viewports are a bad idea".)
Related
I am trying to make my site responsive and was originally planning on using #media screen property in CSS, in order to optimise it for mobile devices.
I'm already using bootstrap but want to modify parts of it (which I have been doing using #media screen) for mobile devices. However, I've been told that this is unprofessional and that I should avoid using this. Is this true?
Thanks
It's hard to fathom why someone would tell you that using #media screen is unprofessional. That's how media queries work for, ya know, screens.
No, there is absolutely no reason to think that using media queries for screen, print, or speech is unprofessional in any way. It's a necessary tool in your web dev toolkit and you should feel free to use it as intended for your responsive websites.
See here for Mozilla's documentation for using media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
UPDATE
Based on the update to your question (where you added that you are using Bootstrap), I would tend to agree with #aaron-mcguire's answer below.
As he alluded to, it's impossible to discern exactly the context in which your friend/colleague/person told you it would be unprofessional to use #media screen. But if you're using Bootstrap, it probably makes sense to customize Bootstrap's built-in grid system in order to best meet your layout needs.
It's a very wide question, the answer to the whole question would be no - it's not unprofessional to use media queries, they are a fundamental part of the responsive development process. Where the question becomes a little jaded is when you mention you are using bootstrap.
As others have mentioned Bootstrap also uses media queries: https://getbootstrap.com/docs/4.3/layout/overview/
Since we have no context or design to go off it's hard to assume whether or not you would be fine using the preexisting media queries built into Bootstrap or if you would need to define your own.
Perhaps the person you were talking to has said it was unprofessional using custom media queries in place of bootstraps built in ones. Which again is hard for us to judge without seeing code/design. I would say unprofessional is the wrong choice of words - if you're trying to optimise your website on a mobile device then it's probably more a question of - is it the most efficient thing creating custom media queries in place of using the #include media-breakpoint-up(sm) { ... } one.
But again take my answer with a pinch of salt because there is no real context to the question. Web development is a constant learning process there is always somebody who is going to tell you that something you are doing isn't the correct way.
I have desktop version of my site and I want to make a responsive site for mobile devices, but the content of one of my pages which I include from php file is whole different for mobile version. I could put the desktop content and mobile content into DIVs in one file and use display:none display:block but it seems to be not ergonomic way for larger contents. What are the standards today for solving such a problem? I've search on the internet and there are some solutions with display or js load file as answers for people's questions, but I'm asking more for the standards, an ergonomic way of solving this. If I'm wrong then just correct me, but maybe the best way is just to put everything in one file and operate with css (display code).
I use in my Websites some kind of "adaptive" Webdesign.
A PHP Script checks wether is a Mobile device or a desktop device.
In each desktop and mobile site is some CSS with the#media (min-width: 700px) and (max-width: 1200px){}You can choose some different min and max values. With this layout it is easy for me to design for different display sizes.Hope this solved your problem
Hi Guys (& Girls of course)
I'm having a major problem with webkit and media queries. Basically they are only kicking in around 15-30px after they should.
When I load the page with Javascript enabled I can see from the console the correct device width and this corresponds with the array of extensions that I've thrown at it.
When I disable javascript I get the same result so obviously it isn't my javascript or any plugins that are throwing things out.
In the dev tools I can watch the inspector tab and the relevant media queries don't kick in until after they are supposed to and you can see the the resolution they have kicked in don't match the media queries themselves.
Any help would be much appreciated on this one as I'm now not really able to come up with any other suggestions.
If there is any information that I can give you that will help you to help me please let me know (I'm restricted in what screenshots I can provide due to non-disclosure).
Thanks in advance & here's hoping :-)
John
After sharing my question on Twitter I was sent this link which has fixes
http://mattstow.com/your-media-queries-are-wrong-fix-them-with-viewport-genie-and-mqgenie.html
It basically says that webkit doesn't take into account the scrollbars when applying media queries and that would (to me) explain the correct space that the media queries are off by. I hope that others find this answer useful as I couldn't find any information by searching Google. Obviously now that I am able to narrow down the search I would probably be able to to find the answer on there.
Check the difference between the browser width and the viewport width. It's the latter you want to design for with mobiles, tablets etc.
The scrollbar is the cause of this, the calculated width from js and the width you define in media query are not the same due to scrollbar (I think in some browsers they are the same but not all).
You need to sync the width so that js and media query is the same. If you want to go with media query width then you probably need an element to check for that changes with the css. If you wanna go with js width then you can easily add a class to the body and target your media query with that class. I am sure there are other ways of syncing as well.
I'm in the early stage of building a site. I'm looking at some design elements that would take advantage of media queries to work properly at smaller screen sizes.
I've no problem with this except that this will be a small site and therefore pretty much the only javascript running on it will be a Polyfill for media queries for IE and other limp along browsers.
How much will this impact performance? Are there any proper tests that have been ran?
I ask because I'm in the stage now that if the polyfill affects the performance enough I can tweak the design so I don't have to use them, and also as a thought for future projects.
Bonus Question:
If I don't use mobile first but use mobile last, and do max-width queries rather than min, would I even need a polyfill. If nothing about the page is changing until it's less than 500px wide do I really need to worry about IE not displaying them? Or am I missing some edge cases?
Let's start with your bonus question.
If you approach with max-width media queries, i don't think you actually need a js solution for IE8 and below. That said, it really depends on what's your site "breaking point".
Probably, a user who still has IE7 running won't have an hd screen with 1920x1200 resolution. So keep in mind to make everything work well for 800x600 screens without media queries involved.
Personally, i prefer a min-width approach, so i can progressively enhance my site features. But it really depends on your project type/audience.
According to StatCounter's global stats, at Sept 2012 ~14% of users still use IE8, and less than 2% IE7.
If you want to serve the best user experience for this 15% (~6 every 100), then you probably need respond.js.
I've used and tested it on IE7 and IE8. I didn't notice a difference in performance, but i can't find any benchmark test online.
It's recommended by Modernizr and included in html5boilerplate responsive build, so i'm pretty sure you can...trust it ;-)
Im trying to make some sort of liquid-fixed weblayout with CSS. The problem is that the site isn't very big, so when users with big screen resolution visits the site it looks very small and empty.So I need the menubar(which is located in the bottom) and some of the main elements to use some more screen space, when visited with larger screen resolutions. Sort of "scale to fit" can anybody help me out please?
My CSS styling as for now is just made as a fixed weblayout.
Read this: http://www.alistapart.com/articles/responsive-web-design/
and try to avoid using PX for widths, use % more :)
You might find this useful too, if you are looking for a cross-browser method for responsive web designs. It's called Respond.js:
https://github.com/scottjehl/Respond
There are also some good snippets and theory in this article from Smashing Magazine:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Here is some more information from WebDesignerDepot:
http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
EDIT: Updated with a nice new anything and everything roundup from WebDesignerDepot