When using responsive design, is there a way to still allow a user to view the full site?
E.g. They are viewing on an iPhone, but want to see the full site. They click a "Full Site" link, and it shows them the 1024px version.
If you're using media queries, only apply rules beneath a body element having the class 'responsive'.
#media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
If the user doesn't want to view the responsive layout, simply remove the 'responsive' class from the body element, nullifying all rules. You could persist the users preference by cookie or some other method as well.
Demo: http://jsbin.com/obaquq/edit#javascript,html
Reducing the window to no more than 500px will turn the text white, and the background blue. This is conditional on the body having the 'responsive' class. Clicking the first paragraph will toggle this class, and thus toggle the effects of the media query itself.
I've been wondering about this. I had success using jQuery to modify the viewport tag, seems to work fairly well from what I can tell so far. Doesn't require multiple stylesheets or a lot of extra CSS.
http://creativeandcode.com/responsive-view-full-site/
Haven't tried this, but thought about this issue myself. I imagine you could use a stylesheet switcher that deactivates the core responsive stylesheet, leaving the user with the full version
Switching stylesheets certainly isn't a new concept. Here is an article for ALA circa 2001 addressing switching stylesheets: http://www.alistapart.com/articles/alternate/
Related
I'm trying to change the breakpoint of a website's header.
the theme I installed onto this website has the mobile header breaking at 1139px and below. I want to change it so that it breaks at the standard 1024px (ie 1023px)
website: https://www.vibrantrealestate.com.au/
normally i just go into the css and change the #media query to the width i want to, but this theme has quite a few #media querys with min-width: 1140px/max-width: 1139px when i searched in the stylesheet so i'm not exactly sure which one I should change. i've tried trying to change them individually through the wordpress customiser, however i'm still a bit stuck for ideas as it isn't changing the appearance. thanks
I would not modify the theme's original style rules, instead you want to override them.
Although not advisable, this could be as simple as making new #media rules placed at the very bottom of the theme's CSS file, so in theory they override the earlier rules (if you configure the new rules correctly).
However the best thing would be to create a child theme, with the original theme as the parent. This would ensure your changes are wholly separate from the original code; much cleaner/safer/more-organized.
In either case, you'll have to use your brain to setup the new rules so they fully override the originals. You may need to make use of the !important flag.
You could make an override that covers a slightly wider range, to make sure your aesthetic changes take hold. e.g. min-width: 1000px/max-width: 1200px; (if the original is min-width: 1140px/max-width: 1139px).
You can't avoid work when doing responsive optimization.
I am creating media queries for a page but I'm having a problem in getting them to break at exactly the points specified in my media queries.
For example I have:
#media all and (max-width:1000px) {
header nav ul.nav_items li a {
padding:15px 10px 15px;
}
}
But when I use Chrome and open the dev tools, and observe the viewport/width of the browser, the CSS rules take effect at somewhere around 1226px. Why aren't the CSS rules being applied at exactly 1000px?
Here is a jsfiddle of my HTML/CSS: https://jsfiddle.net/at68m0zp/
By moving the media query to the end of your CSS file, you will make it override the set values. The later something appears (and the more specific it gets) the more preference it receives. Because your query is at the start of the file, any changes to your header nav's display property later does not get applied. Please not that media queries do not increase specificity or get any special treatment, they just get ignored until they are in the range defined by them.
So there is probably a snippet later in your file with a max-width of, say, 1000px. Because it comes after your 900px one but the screen size makes both valid, the 1000px one takes effect.
I had a snippet with the changes but because you posted your entire HTML and CSS it is too long to post here. Trust me, it works if you move it to the end
326px difference is definately not 'inaccuracy'. Something is broken here big time. I might guess that you have more media queries and mistaken min-width max-width setups somewere.
The best to check what is actually going on:
Firefox - hit F12 (or open Dev Tools when on Mac)
Go to 'Style Editor' in Dev Tools top bar
Column on the right shows list of #media rules (breaking points)
Have fun and good luck with debug.
I'm just wondering if it is possible to target a tablet without using media queries. The reason I ask this is that I already using media queries but I have images that are grayscale on desktop and when hovered they change to the original colour. I have removed the grayscale when the device hits a certain size so it is fine on smaller tablets and mobiles but it is just a bit too small for the ipad and certain tablets when they are landscaped.
Is there any way to target the tablet to turn the filter off without touching the media queries?
Thanks in advance
The website in question is www.garethjweaver.com
Have a look at the Mobile ESP framework; specifically the JavaScript one. It can detect individual devices or groups of devices such as tablets.
http://blog.mobileesp.com/
The method most pertaining to what you want to achieve is:
MobileEsp.DetectTierTablet();
It also allows you to pick specific groups of tablets by OS:
MobileEsp.DetectAndroidTablet();
MobileEsp.DetectWebOSTablet();
MobileEsp.DetectIpad();
MobileEsp.DetectMaemoTablet();
MobileEsp.DetectBlackBerryTablet();
MobileEsp.DetectOperaAndroidTablet();
A possible usage scenario:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.hand-interactive.com/js/mdetect.js"></script>
<script>
$(function() {
if(MobileEsp.DetectTierTablet()) { // if its a tablet this will be true
$("html").addClass("isTablet"); // this will add the isTablet class to the HTML element
}
});
<script>
The example above uses jQuery, which will make things easier for you if you are getting started with JavaScript. With that in place you just need to set up rules for your tablets in your stylesheet like this:
<style>
body {
max-width: 1200px;
}
.isTablet body {
max-width: 100%;
}
</style>
It also has other versions for ASP.NET and PHP so you can do the detection server side.
Here's a fiddle illustrating the functionality outlined above:
Fiddle
I get that you don't want to touch the media query, but as far as I can see it feels like your problem can be solved by
#media (orientation: landscape) { ... }
You want to determine if it's a landscape view..right?
about other usages of media query MDN:media query
if you really don't want to touch it, there is another option is to use javascript. But I think that will be make things more complicated.
Hope my answer helps..:)
I have read in a few other posts that creating a tappable link for a phone number can be done with tel: in an anchor tag
I would like to implement this in a responsive website.. something like this:
Call Us! <span>(555) 555-5555</span>
(the span tag I plan to use to hide the phone# with CSS)
The idea is that on a desktop you will only see "Call Us! (555) 555-5555", but not be an actual link
But when we scale down to mobile, you will then see a stylized link that just says "Call Us!" that you can click.
I'm sure there is a way to accomplish this with JavaScript or JQuery... but is there anyway to accomplish this with CSS Media Queries?
Note: Visual styling is no problem.. just looking for a reasonable solution for the "switching" concept.
Thanks in advance!
There really isn't anything wrong with leaving the link on desktop computers. This would for example allow you to click the link to call via Skype or other VOIP program you might have installed.
If you still want to change the link, just create two of them. One that is shown for desktops, the other for mobiles.
You could create 2 links, one to show on desktop and one for mobile
OR
Use css to style the anchor with phone number in them to default cursor so it does not look like a link even when you hover. To complement this, you need to use js to disable the click action.
This is all assuming you can detect what device you are on reliably.
I think your best bet would be to add an ID to your anchor tag and through your media query you can hide it on the desktop version there no need for the span.
Then for your non anchor text hide that when you are scaled down through another ID in a media query.
TEL: 123-456-789
#media screen and (min-width: 600px) {
.tel-link {
color: #000 !important;
text-decoration: none !important;
}
}
This will display the phone number in plain black for the browsers over 600px wide ( so it doesn't look like a link ) even though it still has a link. I think it's ok because you can make a call from PC nowadays.
I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?
To post some code here is my media query:
#media screen and (max-width: 600px) {
.topbar{
opacity: 0;
}
....
}
I would say do some more research on building your CSS but to answer your question:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>
It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">
You might want to read Detect different device platforms using CSS for some related content.
Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.
If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled
css has nothing to do with loading different index files according to the browser width.
If you want to style your elements differently using #media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.