help me to find correct css code that make Responsive media query work after 1400 resolution browser?
Now i try :
#media only screen and(min-width: 1400px) {
.div {.......;}
}
but this is not working..
Related
I am trying to find a way how i could get information from browser what is users selected color theme in google account (or maybe any other social network that user is connected to) and set the same theme for my website.
Or at least get browser appearance theme and set color theme of my website accordingly.
Unfortunately no one gave any suggestions,
But thanks to Steve Griffith - Prof3ssorSt3v3 i have found some solution:
Prof3ssorSt3v3 have YouTube channel and posts there great videos so i recommend that channel to everyone who is learning JavaScript or PHP.
And the answer is...
According browser color-scheme it is possible to select dark or light color scheme for your webpage.
In CSS file set supported color schemes as below:
:root {
color-scheme: light dark;
}
or in HTML head set:
<meta name="color-scheme" content="light dark" />
next create different CSS for both color schemes separated like this:
#media screen and (prefers-color-scheme: dark) {
.someClass {
// some CSS
}
}
#media screen and (prefers-color-scheme: light) {
.someClass {
// some CSS
}
}
I have implemented a popup that automatically comes up on home page.
This works fine on desktop.
But it doesn't come up on mobile browser.
Is there any specific technique of doing this?
Thanks
How do you detect that the homepage window is active? I'm assuming your are using something like:
if (window.location.href.match('homepage.html') != null){
your code;
}
The answer to this question should be helpful to you:
Popup to display if viewed on mobile
You should implement the logic in css / JavaScript and reference your div (popupWindow element):
/* hidden on default */
div#popup { display: none; }
/* use a media query to filter small devices */
#media only screen and (max-device-width:480px) {
/* show the popup */
div#popup { display: block; }
}
If you're talking about a pop-up window, the browser on your mobile device may block those by default. In that case, it won't work on the desktop either unless the browser is configured to allow pop-ups.
Is there a script i can use to disable my entire website (in joomla) ,from being viewed on mobile devices? I haven't used any code yet. but I do use a script to disable right clicking but it's not for the mobile version. I don't want mobile viewing at all.
But of an odd one but you could do it using a CSS3 media query like so:
#media only screen (max-device-width : 768px) {
html,body { display: none; }
}
This will result in a completely blank screen for devices that are 768px and below. You would simply need to apply to above code to your template css file.
You could maybe also use Javascript like so:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
getElementById('body').style.display = 'none';
}
I haven't tested this on every mobile device out there but it will work on most
Similar questions have been asked here before, but after reading through them I've not yet found an answer that works with my site.
I've built the site around Bootstrap but added some of my own media queries. Live test site is at: http://agoodman.com.au
The sections being changed by the media queries are "our fees" and the "map" overlay. If you're on a laptop, resizing the browser makes these sections display as blocks.
My stylesheet links:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/user.css" rel="stylesheet">
"User.css" is just a separate file because I wanted to be able to keep and update bootstrap's main framework as necessary. User.css overrides the styles in bootstrap. My media queries in user.css are as follows:
#media screen or handheld(max-width: 979px) {
.fee-buttons {
height: auto;
font-weight: 600;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
.fee-buttons .transformation {
width: 100% !important;
height: 300px;
position: relative;
z-index: 10;
left:0;
}
.fee-buttons .hourly, .fee-buttons .membership {
float: none;
width: 100% !important;
}
li.button{
overflow:visible;
}
}
#media screen or handheld(max-width: 995px) {
#overlay {
position: relative;
display: block;
width: auto;
right: 0;
padding:1em;
}
}
As I said, on desktop browsers this works fine, but on mobile browsers it's not working at all. I've tested both on an iPhone 4 (using safari) and on an HTC Desire (using the stock android browser) and both display the same way - ignoring the media query and just displaying the full website with lots of really squished and unflattering content.
Any ideas on what I'm doing wrong here?
EDIT:
Here are screenshots of what it's SHOULD look like at a small screen width:
And what it currently looks like on Android and iPhone, where the device is ignoring my media queries:
Sorry to answer my own question, but I found something that worked.
There was an error with the way I set up the media query. Instead of
#media screen or handheld(max-width: 995px)
I changed the query to
#media handheld, screen and (max-width: 995px)
as suggested by this guy: https://stackoverflow.com/a/996820/556006
and it worked perfectly across all devices. Thanks to those who offered suggestions, upvotes to all of you.
displaying the full website with lots of really squished and unflattering content.
This might be due to the fact that your media queries target large screens with a width of 979 and 995 pixels. Mobile screens are much smaller.
To target something like an iPhone 4 you need a max-width of 960px (that's why bootstraps default is at 960) for landscape and 480px for portrait.
Since you can't target all possible screen sizes bootstrap offers a sensible list of default widths which you should stick to too.
I'm developing a website for a business. It's not a web application by any stretch of the imagination but I would like it to look ok on mobile devices rather than simply scale the desktop version. After lots of research into media queries and responsive/adaptive design approaches my requirements are that the mobile layout only kicks in when the user really is on a small screen and not just resizing their desktop window, the solution is simple and can be accomplished with media queries and minimal javascript.
The approach I've come up with is something like this:
<script type="text/javascript">
var isRetina = window.devicePixelRatio > 1 ? true : false;
var isMobile = (screen.width < 768) ? true : false;
if (isMobile && isRetina) {
SHOW MOBILE LAYOUT AND HI-RES IMAGES
} else if (isMobile && !isRetina) {
SHOW MOBILE LAYOUT AND LO-RES IMAGES
} else if (!isMobile && isRetina) {
<<SHOW HI_RES IMAGES>>
} else if (!isMobile && !isRetina) {
SHOW DESKTOP LAYOUT AND LO-RES IMAGES
}
</script>
Before I commit to this approach I figured I'd check in and see if there is a problem or a terrible gotcha awaiting me. Or if there's an even simpler/better way to achieve this goal. I've searched a bunch on SO an haven't seen any mention of using this exact same solution.
The reason javascript is not a preferred method when loading CSS layouts is because javascript is usually the last thing loaded when the browser renders your page. This means that for a flash second you'll see your initial layout on the screen, before it loads the correct CSS. The simplest and most ideal approach is to make use of CSS3 Media Queries (something like this simple tutorial could go a long way: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps).
The other option you have is to use Modernizr to load your stylesheets or other files that you may want to load based on viewport sizes. Look into the Modernizr Doc, you can basically "test" for the functionalities and features on the current browser that's being used to view your webpage - and load files accordingly. As a side note, Modernizr is a JS library so again use with caution when loading CSS files - it's known to load them without the splash screen of your initial layouts but I'd still say the best practices for loading layouts based on media queries is to use the CSS3 media queries themselves.
sorry to post to answer, couldn't add comment.
window.devicePixelRatio on firefox (and i believe Mac) will be bigger than 1 if you zoom in, which could result in a bug
navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)
this might help