I understood how I change CSS via media queries (such as media="screen and (max-width:640px)")
but let's say I want to write (just for example)
<div>
[if screen resolution is lower then 960 px]
<div>
some new text only for lower resolution
</div>
[end of condition]
</div>
What is the condition I need to write to get it right?
As far as i have experienced, you cannot do media queries inside HTML pages. You need to do it from within your CSS.
But if you want to show some special text only when it is below a certain resolution, why not only make it visible when the resolution is lower than 960px?
Creating responsive designs is very different from a regular design, because you have to think a lot more (which is haaard)
you can check it via using javascript screen object :
screen.width
or you can do this with css
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
http://css-tricks.com/6206-resolution-specific-stylesheets/
http://www.javascriptkit.com/howto/newtech3.shtml
I am actually going through the same situation and found that if you want to do this you could really add all the text in the HTML page, and then hide it on screen widths that you don't want it to show. For example:
<div>
[text that will be shown for screens less or equal to 960px in width]
<div class="smallScreen">
some new text only for lower resolution
</div>
[end of condition for small screens]
[text that will be shown for other screens that are greater in width]
<div class="largeScreen">
some new text only for higher resolution
</div>
</div>
And then you could add CSS:
/* On smaller resolutions, hide the text for Large screens */
#media only screen and (max-width: 960px) {
.largeScreen {display: none;}
}
/* On larger resolutions, hide the text for Small screens */
#media only screen and (min-width: 960px) {
.smallScreen {display: none;}
}
I hope this works out fine :)
You need to assign an id (or a class or any other way of finding your element from CSS) to the <div> and then you can set a media query definition like this:
<div id="mydiv">...</div>
<style type="text/css">
#media screen and (min-width: 961px) {
div#mydiv { display: none }
}
</style>
Or for better readability: Make it hidden on default and visible if max-width: 960px.
I could be wrong, but I think css selection by resolution would need a little help from javascript.
Here is a quick example of what that js could look like, embedded in jquery:
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
Hope that helps.
You can add jQuery function to change style dynamically as per scree resolution.
if(screen.width==1600)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
}
else if(screen.width==1280)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
}
else if(screen.width==1024)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
}
else if(screen.width==800)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
}
Answere was helpful from:
if screen resolution is less than x append css
You can do this entirely with CSS 3 using the #media command.
**#media (max-width:960px) { css... } //nothing with screen size bigger than 960px
#media (min-width:960px) { css... } //nothing with screen size smaller than 960px**
Jason Whitted makes a good point, this is CSS 3 only, so it won't work with older browsers (it should work with all modern browsers though).
You can as well do screen or device edit
#media screen { .nomobile { display: block; } } //desktops/laptops
#media handheld { .nomobile { display: none; } } //mobile devices
Or you could assume mobile devices will have a smaller width, and go on that.
Related
I have the following code to show 2 images beside each others:-
<img style="padding-left:25%;margin-top:15px;margin-right:20%" src="~/img/1.png" /><img style="margin-top:15px" src="~/img/2.png" />
as follow:-
but on smaller sized screens, the 2 image will be shown under each other (which is fine), but they will not be aligned vertically as follow:-
so how i can fix this? in other words how can I add a margin-left for the second image only if it is shown on a separate line?
You will need to use media queries:
img {
margin-top:15px;
}
#media screen and (min-width: 768px) {
img {
padding-left:25%;
margin-right:20%;
}
}
That 768px is arbitrary, you can change it to the value you need. You can use min-resolution instead of min-width instead.
You can also try using display property with media query.
<div class="display">
<img style="margin-right: 20px;" src="~/img/1.png" />
<img src="~/img/2.png" />
</div>
.display {
display: flex;
}
#media(min-width: 320px) and (max-width: 767px) {
.display {
display: block;
}
}
You can do it with javascript. Listen every time window is resizing and calculate is the sum of width of all images are higher than the window width, and add margin/padding according to situation
window.addEventListener('resize', function(event){ //listen to window resize
let img1w = document.getElementById('image1').offsetWidth;
let img2w = document.getElementById('image2').offsetWidth;
if (img1w + img2w > window.innerWidth) {
document.getElementById('img1w').style.marginLeft = '200px' //just a placeholder. do what you want here
}
});
You can also use bootstrap media queries but there's only limited number of break points. So you have to create your own media query
I have a less file containing a simple css class that needs to have different styles applied for various screen sizes. The following code only works on desktop (the first #desktop media query). Nothing happens for mobile. I have tried many variations of this syntax with no luck and haven't found anything about this in the docs. You can also see the live demo here (notice how if you stretch the screen wider than 1024px the div turns orange, but it does not turn red or green when smaller than 1024px as it should). Thanks.
html
<div class="derp">
Hello
</div>
less
#desktop-min-width: 1024px;
#phone-max-width: 768px;
#desktop: ~"only screen and (min-width: #{desktop-min-width})";
#tablet: ~"only screen and (min-width: #{phone-max-width}) and (max-width: #{desktop-min-width}";
#phone: ~"only screen and (max-width: #{phone-max-width})";
#appHeight: 749px;
#appWidth: 421px;
.derp {
#media #desktop {
background-color: orange;
}
#media #tablet {
background-color: red;
}
#media #phone {
background-color: green;
}
}
There is a problem with
#tablet: ~"only screen and (min-width: #{phone-max-width}) and (max-width: #{desktop-min-width}";
Remove it for a moment, and you will see green background is displayed for phone screen.
You need to add ")" for a #tablet at the end
I'm trying to write some css that will only work in firefox, that is within a media query so it only works after 767px. Below is what I've currently written but it doesn't work.
#media only (min-width: 767px) {
#-moz-document url-prefix() {
.SearchBlock input {
width:88% !important;
}
}
}
It works just fine without the "#media only" section, but I only want it to work after 767px. Is this possible?
Edit: Changed resolution to width.
Don't use min-resolution. Use
min-width: if you need to apply CSS to the devices which are more than 767px, and use
max-width: If you need to apply CSS to the devices having size less than 767px - for mobiles
Example:
#media screen and (min-width: 767px) {
#-moz-document url-prefix() {
.SearchBlock input {
width:88% !important;
}
}
}
Hope this helps!
You are not getting the result because you are using min-resolution correctly.
You can do one of the 2 :
Either change min-resolution to min-width
Enter resolution value in min-resolution for example min-resolution(192dpi)
Px is not the unit of resolution.
Change min-resolution to min-width.
Resolution is for the pixel density of the device. width refers to the actual width which is what you want.
The url-prefix portion needs to have the url of the document the style rules refer to, such as
url-prefix("https://example.com/")
The #document CSS at-rule restricts the style rules contained within
it based on the URL of the document.
https://developer.mozilla.org/en-US/docs/Web/CSS/#document
Try this. Should work! :)
.SearchBlock input {
display: block;
width: 30%;
}
#-moz-document url-prefix() {
#media screen and (min-width: 767px) {
.SearchBlock input {
width:88% !important;
}
}
}
<div class="SearchBlock">
<input type="text" placeholder="text"/>
</div>
I wanted to have large pictures be hidden for mobile devices. Looking at this site I put the following styles in my css:
//medium+ screen sizes
#media (min-width:992px) {
.desktop {
display:block !important;
}
}
//small screen sizes
#media (max-width:991px) {
.mobile {
display:block !important;
}
.desktop {
display:none !important;
}
}
Then I apply the class in my html like this:
<img class="desktop" src="img/test/test.jpg"
alt="jhkjhjk" height="600" width="900">
But when I shrink my browser window the image remains there. Have I missed something?
Since you are using Boostrap, you can do it even easier.
Append a class of
visible-md
to your image.
md is for >992 px.
Check out the easy classes you can use
http://getbootstrap.com/css/#responsive-utilities
EDIT: probably wanna do visible-md visible-lg if you're gonna do visibles. The chart explains all the combinations.
So I'm using two media queries on my page:
<link rel="stylesheet" media="screen and (max-device-width: 1099px)" href="./src/css/narrow.css" />
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="./src/css/main.css" />
The main.css one loads by default, but when the browser is re-sized below 1100px, it simply loads no stylesheet, therefor the entire page renders no styling.
Anybody have any clue what I'm doing wrong? Also, isn't it possible to use media queries inside of "main.css"? So I can only alter certain elemnts based on browser width, instead of loading a whole new stylesheet? Thanks much guys :)
Yep you can do this all in the main stylesheet, so something like this:
#media only screen and (max-width: 1099px){
/* css here */
}
#media only screen and (min-width: 1100px){
/* css here */
}
Actually I also noticed you had max-device-width: on so this will only target ipads/iphones etc which is probably why you weren't seeing this stylesheet on the desktop
The alternative is to use Javascript/Jquery to detect the screen size and load a different stylesheet based on that screen size, but Adam's solution is probably better unless you need to separate your style sheets for a particular reason.
This article will give you all the information you need using jquery - http://css-tricks.com/resolution-specific-stylesheets/
You can also use multiple queries - I make a new one every time I fine a width that doesn't look quite right.
#media (max-width:319px) {
// styles
}
#media (min-width:320px) and (max-width:479px) {
// styles
}
#media (min-width:480px) and (max-width:479px) {
//styles
}
etc..., etc...
I'll also usually built the queries on each element that needs them. I find that when you put ALL your rules for the a media query in one section of your stylesheet things get confusing to maintain.
For example:
div.box {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...
Then on another element that needs resizing I'll do the same thing:
div.otherbox {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...