In the styles.css, I am using media queries, both of which use a variation of:
/*--[ Normal CSS styles ]----------------------------------*/
#media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone. Instead, I just see the default CSS.
Can anyone point me in the right direction?
All three of these were helpful tips, but it looks like I needed to add a meta tag:
<meta content="width=device-width, initial-scale=1" name="viewport" />
Now it seems to work in both Android (2.2) and iPhone all right...
Don't forget to have the standard css declarations above the media query or the query won't work either.
.edcar_letter{
font-size:180px;
}
#media screen and (max-width: 350px) {
.edcar_letter{
font-size:120px;
}
}
I suspect the keyword only may be the issue here. I have no issues using media queries like this:
#media screen and (max-width: 480px) { }
i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css
here is an example :
<meta name="viewport" content="width=device-width" />
<style>
#media screen and (max-width:900px) {}
#media screen and (min-width:900px) and (max-width:1200px) {}
#media screen and (min-width:1200px) {}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
css Link line as simple as above line.
Including a meta tag like below can cause the browser to handle the viewport zooming differently.
<meta content="width=device-width, initial-scale=1" name="viewport" />
Today I had similar situation. Media query did not work. After a while I found that space after 'and' was missing.
Proper media query should look like this:
#media screen and (max-width: 1024px) {}
The sequential order of css code also matters, for example:
#media(max-width:600px){
.example-text{
color:red;
}
}
.example-text{
color:blue;
}
the above code will not work because of the execution order. Need to write as following：
.example-text{
color:blue;
}
#media(max-width:600px){
.example-text{
color:red;
}
}
Always mention max-width and min-width in some unit like px or rem. This figured it out for me. If I write it without the unit and only the number value, browser can't read the media queries. example:
this is wrong
#media only screen and (max-width:950)
and
this is right
#media only screen and (max-width:950px)
The OP's code snippet clearly uses the correct comment markup but CSS can break in a progressive way — so, if there's a syntax error, everything after that is likely to fail. A couple times I've relied on trustworthy sources that supplied incorrect comment markup that broke my style sheet. Since the OP provided just a small section of their code, I'd suggest the following:
Make sure all of your CSS comments use this markup /* ... */ -- which is the correct comment markup for css according to MDN
Validate your css with a linter or a secure online validator. Here's one by W3
More info:
I went to check the latest recommended media query breakpoints from bootstrap 4 and ended up copying the boiler plate straight from their docs. Almost every code block was labeled with javascript-style comments //, which broke my code — and gave me only cryptic compile errors with which to troubleshoot, which went over my head at the time and caused me sadness.
IntelliJ text editor allowed me to comment out specific lines of css in a LESS file using the ctrl+/ hotkey which was great except it inserts // by default on unrecognized file types. It isn't freeware and less is fairly mainstream so I trusted it and went with it. That broke my code. There's a preference menu for teaching it the correct comment markup for each filetype.
I encountered this issue recently too, and I later found out it was because I didn't put a space between and and (.
This was the error
#media screen and(max-width:768px){
}
Then I changed it to this to correct it
#media screen and (max-width:768px){
}
It may also happen if the browser zoom level is not correct. Your browser window zoom should be 100%. In Chrome use Ctrl + 0 to reset the zoom level.
Throwing another answer into the ring. If you're trying to use CSS variables, then it will quietly fail.
#media screen and (max-device-width: var(--breakpoint-small)) {}
CSS variables don't work in media queries (by design).
Weird reason I've never seen before: If you're using a "parent > child" selector outside of the media query (in Firefox 69) it could break the media query. I'm not sure why this happens, but for my scenario this did not work...
#media whatever {
#child { display: none; }
}
But adding the parent to match some other CSS further up the page, this works...
#parent > #child { display: none; }
Seems like specifying the parent should not matter, since an id is very specific and there should be no ambiguity. Maybe it's a bug in Firefox?
Add Below tag in html's head section
<meta content="width=device-width, initial-scale=1" name="viewport" />
I use a few methods depending.
In the same stylesheet i use: #media (max-width: 450px), or for separate make sure you have the link in the header correctly. I had a look at your fixmeup and you have a confusing array of links to css. It acts as you say also on HTC desire S.
#media all and (max-width:320px)and(min-width:0px) {
#container {
width: 100%;
}
sty {
height: 50%;
width: 100%;
text-align: center;
margin: 0;
}
}
.username {
margin-bottom: 20px;
margin-top: 10px;
}
due to only not typo mistake not work for me
#media screen and(max-width: 930px) require sopace between the (and) & opening bracket #media screen and (max-width: 930px)
The Only Fix You All Need Is :
Just Take All The Media Queries At The End Of A .CSS File
It Works, Try It
It is important that the #media screen must be at the end of the css
For me I had indicated max-height instead of max-width.
If that is you, go change it !
#media screen and (max-width: 350px) { // Not max-height
.letter{
font-size:20px;
}
}
For everyone having the same issue, make sure you actually wrote "120px" instead of only "120". This was my mistake and it drove me crazy.
Well, in my case, the px after the width value was missing ... Interestingly, the W3C validator did not even notice this error, just silently ignored the definition.
I was having this same problem and it turns out my media queries were in the wrong order. They should be defined from widest to smallest in the CSS
The issue: https://output.jsbin.com/donapohuci
This is a two column layout on desktop. Using a CSS media query, I have set it to be one column when the viewport is 800px or less:
div {
float: left;
width: 50%;
}
#media (max-width:800px) {
div {
width: 100%
}
}
The issue is that when you go to print this (at the moment, using Chrome) it decides that a letter sized piece of paper is smaller than 800px so prints using the media query styles.
We're using Bootstrap where it uses media queries like this. One solution is to modify the CSS so that it adds the 'screen' modifier:
#media screen and (max-width:800px)
Alas, this is a giant enterprise project with multiple teams all contributing so we'd really rather not mess with any of the foundational CSS at this time (as that usually causes a domino effect of other issues on other teams...)
Is there a way to workaround this short of writing a separate print style sheet just for this one particular page we need to have printed "as you see on screen"?
I'm thinking along the lines of some way to tell the browser "pretend the paper is wider than it is and use the desktop layout when you print..."
The way I would solve this is by adding the media screen attribute in the link to the regular CSS so it doesn't apply to print, and create a separate custom print stylesheet to be called after, again, using the print media attribute:
<link href="print.css" rel="stylesheet" media="print">
It is possible that the default Bootstrap has an include to a print file, but this should be easy to remove, and ultimately if it's not possible the latter stylesheet will still overwrite those styles.
I am trying to make my website responsive. However, when I use another media query, a lot of things won't work. For example:
(Normal CSS)
div#divName
{
font-size:1em;
}
(Media query code)
#media screen and (max-width: 320px)
{
div#divName
{
font-size:.5em;
}
}
This doesn't work. It only works when I use "!important" behind it. But I don't know if that is correct or "wrong". Could anyone tell me how I can fix this?
All !important does is increase specificity. To avoid using !important, all you need to do is increase specificity.
In your case, both of your selectors have identical specificity. The issue is most likely caused by your media query being placed before your "Normal CSS", and thus getting overridden.
If they're in the same CSS file, ensure your "Normal CSS" is placed before your media query.
If they're in different CSS files, ensure the file containing your media query is included in your HTML document after your "Normal CSS".
make sure your CSS rules that you want to override loads after.
in your case
div#divName
{
font-size:1em;
}
should be loaded first and after that:
#media screen and (max-width: 320px)
{
div#divName
{
font-size:.5em;
}
}
you want to have two separated files style.css and responsive.css and include them in following order:
<link href="style.css" rel="stylesheet" />
<link href="responsive.css" rel="stylesheet" />
I want to Trim a string Using css .
example
my string is
"hi google how are you"
I Want to Get output
"hi"
Get first two letter . Using Css is it possible Trim a string .
Although not possible using CSS; but you can get some kind of illusion in ideal condition may be this workaround work for you. I've used here text-overflow: ellipsis;
you can check the DEMO.
<p>hi google how are you</p>
p {
text-overflow: ellipsis; /* IE, Safari (WebKit) */
overflow:hidden; /* don't show excess chars */
white-space:nowrap; /* force single line */
width: 17px; /*This property playing a major role just showing the first 2 letter*/
}
I'm not quite sure why you wanna do it with CSS (it makes more sense to this this with JS or your back-end server side language), I presume it's because you want to target one screen size with say the full sentence and another with an abbreviated one? If so, sadly CSS can't do this, however you could do something like this in your HTML:
<span class="widescreen-span">[pull full string here]</span>
<span class="smallscreen-span">[trimmed string here]</span>
Where you actually have both sets of text available in the HTML, however we will show and hide them accordingly.
Then have a stylesheet for each screen size (there are several ways of doing this...):
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
Then in widescreen.css you could do this:
.widescreen-span { display:inline; }
.smallscreen-span { display:none; }
And then in smallscreen.css you could do this:
.widescreen-span { display:none; }
.smallscreen-span { display:inline; }
AFAIK: There's no way to do that in CSS. The only way to achieve what you want is using some script language (e.g. JavaScript).
That is not possible with CSS.
The only possible solution is by wrapping the rest of the sentence in a span, and hide it, like this:
<p>hi<span> google how are you</span></p>
span { display: none; }
Or you should look into a Javascript or PHP solution.
I would personally do this with Javascript
var startText = "hi google how are you";
var endText = startText.substr(0, 3);
// endText is now "hi"
CSS is a method of describing the style of a page's elements. You are trying to edit the content of a page using a framework designed not to have any affect on the content of the page, just the style.
You should probably look at using JavaScript to do what you want. Formatting page elements in this way is not possible in CSS.
CSS is per se not a programming language.
On the other hand, there are good news for you. You can use a programmming language such as JavaScript or jQuery to accomplish this, or even a backend programing language such as PHP or Ruby.
CSS is a language used to apply styles in a cascade manner hence why it is called CSS (Cascading Style Sheets).
Just to give you some advice, what you're trying to accomplish is not called trim. Trim is to remove unnecessary white spaces from a string like the example here shows: JavaScript Trim() Function.
What you're trying to accomplish is called substring which is explained here: JavaScript substring() Function.
var str = "Hello world!";
var res = str.substring(0, 2);
/* Output: He */
I have a DIV with a background image. I want the image to display on the screen (which works already) but I do NOT want that image to print when the page is printed. Is there a way in CSS to accomplish this?
You can add a print stylesheet that removes the image for printing purposes...
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Inside the print stylesheet, you just use normal CSS, which will only apply when printing, for example...
.myStyle {
background-image:none;
}
I think media queries will helpful for you
#media print
{
div.test {background:none;}
}
You can use a media query
#media print {
#yourDiv { background-image:none; }
}
OR load a print specific style sheet where you overwrite the background.
If you need to target IE 8 or earlier, favour the print stylesheet approach, as these browsers don't support media queries.