I'm using css media queries on my website to switch to a more vertical layout on smaller devices. This works quite well, but I'd like to add a button on the site with something like "Show desktop version". I want to make this button (or link, whatever) force or alter the media query evaluations so they evaluate as if the screen width was bigger than it is (e.g. 1200px instead of 320px). Is this possible?
My css looks like this:
#logo {
/* Mobile style */
[...]
#media (min-width: #screen-sm) {
/* Desktop style */
[...]
}
}
#footer {
/* Mobile style */
[...]
#media (min-width: #screen-sm) {
/* Desktop style */
[...]
}
}
/* And so on... i.e. multiple piecewise styles, following the same pattern used in Bootstrap's css */
I found this interesting approach which uses a css class on the body instead of media queries to switch between layouts. However, it completely does away with the actual media queries and uses javascript instead.
"Full web" mobile browsers and screen-size media queries based
edit
Refined the css example. The first 2 answers are very helpful, but I'd rather not have to completely modify the css organization to separate at the root desktop and mobile versions. One more interesting technique:
LESS: Can you group a CSS selector with a media query?
edit 2
An interesting approach is to modify the css media queries via javascript. It scares me a bit though because browser support might be unreliable for an such an obscure technique:
http://jonhiggins.co.uk/words/max-device-width/
There is a bit of redundancy with this method, but a selector has higher specificity its properties have precedence even if a media query matches. For example:
.container, .full-site.container {
/* full site styles */
}
#media (max-width: 395px) {
.container {
/* mobile styles */
}
}
When full site is clicked, add the .full-site class and the full site styles will apply even on devices with a 395 pixel width.
http://jsfiddle.net/7ZW9y/
Two possible implementations comes to mind: 1) segregate your media queries into a separate stylesheet, 2) prepend a specific class to all the selectors inside a media query.
Option 1: Separate stylesheets
Put all of the media queries you are seeking to remove (using the "Show desktop version" button) into a separate stylesheet (e.g., "mobile.css"):
<link rel="stylesheet" type="text/css" href="normal.css" />
<link rel="stylesheet" id="mobileStyle" type="text/css" href="mobile.css" />
You can then remove this element using jQuery (e.g., $('#mobileStyle').remove()). Removing the element referencing the stylesheet will remove all the styles defined in the stylesheet.
Option 2: Prepend a CSS class
Keep everything in a single stylesheet but prepend all media-queried selectors with a single class. For example, you could add a .mobile-ready class to the <body> and then:
#media (min-width: ... AND max-width: ...) {
.mobile-ready header{
}
.mobile-ready footer{
}
.mobile-ready ...{
}
}
With your "Show desktop version" button, remove the .mobile-ready class from your <body>, which will remove all the styles encompassed by the class. Writing CSS in this manner is easy with LESS or Sass.
Try this ... simple, but reasonable solution for sites that are heavily coded.
$('meta[name="viewport"]').prop('content', 'width=870');
Set the width to what you need. I used this in an instance where an existing site is in place and I need to allow mobile to display as normal page, but normal page is centered with content having a width of 865. This minimizes the impact of a full page on a mobile device.
Related
I'm trying to remove two elements from the page of my web app (or the one I'm developing anyone). This is for responsiveness reasons, the elements look great on mobile devices but not very good on desktops. So, I'd like to target the pages by url, then get the elements and hide them.
I'm using node.js but I'm a bit of a noob. Is this something I could achieve with React or Vue or something like that. I tried with jQuery but with no success.
This is the html:
<body>
<div>
<section id="dot1">
<h6>Text Here</h6>
</section>
<section id="dot2">
<h6>Text Here</h6>
</section>
<section id="studiesWp"><img src="/images/ms.png">
<h1>Text Here</h1>
<p>Text Here</p><a href="url/">Text Here</p>
</section>
</div>
</body>
So, I want to hide the two elements: #dot1 & #dot2. The rest of it can stay.
Here's a little jQuery function I tried:
$(window).load(function() {
// Check media queries
if($(window).width() >= 769) {
// Get pathname of page
var page = window.location.pathname;
// If pathname matches any of these
if(page = 'profilePage','projectsPage','contact'){
// Remove two elements
$('#dot1').css('display','none');
$('#dot2').css('display','none');
}
else{
$('#dot1').css('display','block');
$('#dot2').css('display','block');
}
}
});
This is best to do with CSS3, which has media queries to apply styling only if the viewport it's being seen has certain properties.
Desktop-only css
So, if we want to create an element that's only visible on phones, and our css was desktop only, we'd probably create something like this:
/* This example will not work correctly, look below for the full code! */
.phone-only {
display: none;
}
Media Query
To make that style only apply to larger screens, we'll use a #media query. We need to apply styles to only smartphones, or devices with a screen width of less then 769px. In CSS, we write that as min-width: 769px, and then wrap it with a media query like this: #media (min-width: 769px).
When we wrap the style we made earlier inside of our #media query, we get a css rule that hides an element on phones.
#media (min-width: 769px) {
.phone-only {
display: none;
}
}
and use class="phone-only".
I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'
How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Here is my site: http://stage.samkeddy.com/
It's responsive using a couple media queries and a mobile menu button powered by javascript.
Here is the javascript for the menu button:
function toggleMenu () {
if (menuIsVisible == false) {
collapsibleMenu.style.height = 'auto';
content.style.paddingTop = '290px';
menuIsVisible = true;
}
else {
collapsibleMenu.style.height = '0';
content.style.paddingTop = '80px';
menuIsVisible = false;
}
}
so you can see that I need to adjust the padding at the top of the content div, in order to offset the menu
But if resize to the mobile size, open the menu, and then resize back to the desktop size, the padding isn't fixed by the media query, because there's still an inline style from the javascript. I tried making the padding on the desktop version !important, but it the padding still doesn't change when resized, even though according to this !important beats inline.
You can test for yourself by opening the size (how it should look), resizing to a mobile width(the nav will disappear, and you will see the menu button), clicking the menu button (leave the menu open), then resize the site back to a desktop width. You will see the padding is still there. If you inspect it, you can see the original padding is crossed out in favor of the inline style.
I know this would be possible by monitoring the width with javascript and setting the padding then, but I really don't want to do that, and don't think I should have to.
EDIT: solved
First, I should have been adding classes, rather than adding CSS with my javascript.
Then I assumed that putting !important outside of a media query would make it only show up on desktop, but it took over all media queries. So placing just this in a query made it work. Note that if I was using 2 separate menus (mobile/desktop), I wouldn't need this, but since it was fixed and the #content needed padding, it had to be done. But using this technique you can also use only a single menu, but doing the height for the menu this way. I've demonstrated the technique in a codepen: http://codepen.io/anon/pen/JFvay
Adding this code to your stylesheet should solve the problem, I just tried this on your website using the Developer Tools and it's working:
#media only screen and (min-width: 643.2px) {
#content {
padding-top: 80px !important;
}
}
Although I'd strongly recommend you to create a separate navigation menu for mobile devices and resort to using #media-queries to display it.
Your problem at heart is that you're mixing CSS and in-line styles. As a general rule, avoid placing specific CSS properties directly on elements, whether in HTML, by using element.style.<property> =, or via jQuery's .css() feature. Instead, you should define the properties you want as CSS rules, using classes:
#collapsible-menu { height: auto; }
#content { padding-top: 290px; }
#someelt.menu-visible #collapsible-menu { height: 0; }
#someelt.menu-visible #content { padding-top: 80px; }
where someelt is some higher-level ancestor element. Then, your JS becomes simply
function toggleMenu() {
document.getElementById('someelt').classList.toggle('menu-visible');
}
If you are targeting browsers which do not support classList (see CanIUse), jQuery provides its own version of class toggling.
CSS is not an imperative language, but if you want, you can think of the #someelt.menu-visible part of the last two rules above as a kind of if statement: "If menus are visible, then shrink collapsible-menu to zero height", etc. In this metaphor of CSS as a kind of programming language (which it is), the presence of the menu-visible class of #someelt could be thought of as a kind of boolean "variable", I suppose. Most likely, you will no longer need a corresponding variable in your JS.
Anyway, the advantage of this is that people looking at your code can see all your CSS-related logic just by looking at the CSS file, instead of having to look at both CSS and JS, and you can change CSS-related things in just one place.
One of our CSS files uses -ms-high-contrast-adjust: none to make sure some background features show up even under high contrast mode. It works fine on IE10 and IE11. Now we're trying to port the same CSS to IE9, and obviously it's not supported.
What's the equivalent of the -ms-high-contrast-*** property under IE9? Is there some other way to trick the browser to not change features with the "high contrast mode" setting?
There ain't an equivalent.
Remarks
The -ms-high-contrast media feature was introduced in Windows 8.
It's for ie10.
You can test it with media-queries like:
#media screen and (-ms-high-contrast: active) {/* ... */}
#media screen and (-ms-high-contrast: black-on-white) { /* */ }
#media screen and (-ms-high-contrast: white-on-black) { /* */ }
http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx
Some developers use it to target IE10 with media queries :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* i-love-ie */
}
PS, this is kind of freaky, you want a browser to force an OS to display in a specific way, or display in a specific way over the OS.
[HOLD ON]
i JUST found this article from Steve Faulkner : http://blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites/
CSS sprites using the before: pseudo element
An alternative to implementing CSS sprites using the traditonal
background-image method is available and it resolves the issue of
images not being displayed in high contrast mode. This alternative
method makes use of the CSS before: pseudo element (note: the after:
pseudo element could also be used). Example:
Link with a home icon and text with default display colors. Link with
a home icon and text with windows high contrast colors.
CSS
span.test1:before {
margin-right: -10px;
content: url(icons.png);
position:relative;
left:-2px;
top:-109px;
}
span.test1 {width:17px;
height:18px;
display:inline-block;
overflow:hidden;}
HTML
<span class="test1"></span>Home
I have no time to test it. Give it a try and come back to us so i can 'correct' this answer if needed.
I have a simple div that I'm styling for responsive design use on smart phones. I'm also using the Fullscreen API so that that div can be made fullscreen, whether on the desktop or mobile.
The mobile version adjust for the menu bar when not in fullscreen with a margin but there is no need for the margin when the div is fullscreen. My implmentation below doesn't appear to work - the margin gets applied both out of full screen and in full screen.
Edit: As indicated by Lie Ryan's answer below, I was make the parent of myDiv fullscreen and the fullscreen pseudo class is only available to the element that is fullscreen.
.myDiv
{
width: 80%;
}
.myDiv:-webkit-full-screen
{
margin-top: 0;
}
.myDiv:-moz-full-screen
{
margin-top: 0;
}
.myDiv:-ms-full-screen
{
margin-top: 0;
}
.myDiv
{
margin-top: 0;
}
#media screen and (max-width: 480px)
{
.myDiv
{
margin-top: 65px;
}
}
Q: What is the order in which CSS media queries and pseudo classes are applied? How do I style my div so that when the div goes full screen, the margin is removed?
EDIT:
I think I see what your question is now. The full-screen pseudo-selector are applied to the item that you're requesting to full screen not to the myDiv. Compare the three full screens in this jsfiddle (Firefox only), only the first one have the full screen rule applied.
OLD ANSWER:
Q: What is the order in which CSS media queries and pseudo classes are applied? How do I style my div so that when the div goes full screen, the margin is removed?
Rules with the same selector specificity cascades; i.e. later rules overrides earlier rules.
Rules with higher selector specificity overrules rules with lower selector specifity. Selector specificity is a fairly complex topic; but the short version is: #id overrules .class overrules tagname overrules * selector. Also, inline styles (i.e. style= attribute) overrules embedded styles (e.g. <style> tag inside <head>) which overrules external styles (i.e. styles linked using <link>).
Neither media query or fullscreen API changes the cascade or specifity rule.