I've looked at several posts on the subject (example, example), and my reasoning should be solid:
#media all and (max-width: 945px) {
div#browser-nav-nav-bar a, div#browser-nav-nav-bar p {
font-size: 0.8rem;
}
}
div#browser-nav-nav-bar a, div#browser-nav-nav-bar p {
color: rgb(255,255,255);
font-size: 1.2rem;
margin: 0 0.5rem;
padding: 0.5rem 1rem;
line-height: normal;
}
However, the font size isn't changing. I can't figure what I'm doing wrong. Here's a JSFiddle:
http://jsfiddle.net/2hLow0c5/
Your selectors are identical (so have equal specificity) so the last font size defined will be the one that is applied.
Move the #media block to the end of the stylesheet.
Related
I have a navigation menu; whose font-size is 10px for small device, 20px for medium and 50px for large device. Unfortunately I am new to tailwind css.
Now I have written the css as below. Is this correct way, do I need to convert the pixel to rem
.nav-link {
font-size: 10px;
}
#media (min-width: 768px) {
.nav-link {
font-size: 20px;
}
}
#media (min-width: 1024px) {
.nav-link {
font-size: 50px;
}
}
If you want to use your custom style, just change from 20px to 10px on the first declaration...
.nav-link {
font-size: 10px;
}
Otherwise, you can use TailwindCSS classes to have almost the same sizes
<a class="text-xs md:text-xl lg:text-5xl">link</a>
Excluding the xs, which is around 12px, the other sizes are the same.
This should be basic but I am struggling with it:
My markup is simple:
<p>
sort / search all events in United States
</p>
And this CSS works well - BUT - in a small screen there is too much text so I am just trying to lower the size of the font, should be simple enough but I can't get it to work.
.button {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family:inherit;
color: #393939 !important;
font-size: 16px;
background: #c8d6e5;
padding: 8px 18px 8px 18px;
border: solid #ffffff 2px;
text-decoration: none;
text-transform: uppercase;
}
.button:hover {
background: #9facb5;
text-decoration: none;
}
#media screen and (min-width: 1251px) {
.button {
font-size: 12px !important;
}
}
Am I doing something obviously wrong here?
Thanks
#media screen and (min-width: 1251px) will only apply styles at 1251px wide and up. If you want to apply styles to smaller screens only, you'll need to use max-width instead, which has the opposite effect.
Alternatively, you could apply the smaller font size by default without a media query, and then use the min-width query to increase the size at larger widths.
I woud like that if my viewport width is smaller than 330px, the paragraphs font will be 9px, whatever its height.
In the same time, I also would like that if my viewport height is smaller than 330px, the paragraphs font will be 9px, whatever its width.
I have tried different orders, with or without !important keywords, I can't achieve the expected result.
There is always either the width or the height rule which conflicts with the other.
Could I handle such situation in CSS?
Here is my code :
p{
font-size: 16px;
}
#media (max-width:600px){
p{
font-size: 14px;
}
}
#media (max-width:440px){
p{
font-size: 12px;
}
}
#media (max-width:330px){
p{
font-size: 9px;
}
}
#media (max-height:600px){
p{
font-size: 14px;
}
}
#media (max-height:440px){
p{
font-size: 12px;
}
}
#media (max-height:330px){
P{
font-size: 9px;
}
}
Just use logic for #media queries. You can read more about them here.
For your problem solution would be code below (as comma creates a OR condition)
#media (max-width: 330px), (max-height: 330px) {
p { font-size: 9px; }
}
Basically I'm playing around with these and I noticed that some of the properties do change as I want. Some (text-transform and font-size) have no effect (they work outside of the media query but not in). The p and #icon part work flawlessly, as well as color and font-family for .title, so I have zero clue as to why this happens.
Relevant code snippets:
#media only screen and (max-width: 1000px) {
p {
background-color: blue;
}
#icon {
display: none;
}
.title {
color: red;
text-transform: lowercase;
font-family: Arial;
font-size: 10px;
}
}
And for the regular screen size I have
.title {
text-transform: uppercase;
font-size: 35px;
font-weight: 300;
}
And in the HTML part
<h1 class="title" style="text-align: right; margin-bottom: 0px;">Jane Doette</h1>
For rules where the selectors are equally specific, the last one takes precedence.
Make the rule inside the media query more specific, for example changing .title to h1.title, or place the rules for regular screen size before the media query.
My guess is that your media query is placed before the non-media query style. If so, put your media query after: JS Fiddle - Media Query Last
.title {
text-transform: uppercase;
font-size: 35px;
font-weight: 300;
}
#media only screen and (max-width: 500px) {
p {
background-color: blue;
}
#icon {
display: none;
}
.title {
color: red;
text-transform: lowercase;
font-family: Arial;
font-size: 10px;
}
}
Otherwise, if the media query is first, the last styles in the style sheet will take precedent: JS Fiddle - Media Query First
I have the following two media queries:
#media (min-width: 320px) and (max-width: 359px){
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 0.5em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 10;
line-height: 0.5em;
color: inherit;
}
.hero-unit {
background: url("../img/now320.jpg");
height: 5em;
width: 15em;
padding: 0.5em;
margin-bottom: 2em;
background-color: #eeeeee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 0.5em;
color: inherit;
}
}
#media (min-width: 360px) and (max-width: 479px) {
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 1em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 50;
line-height: 1em;
color: inherit;
}
.hero-unit {
background: url("../img/now360b.jpg");
padding: 1em;
margin-bottom: 2em;
height: 10em;
width: 18em;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 1em;
color: inherit;
}
}
I'm trying to figure out why the 320 width rule is not being applied at all to my HTML page, even though I've resized it using the responsive design tool in Firefox to have a width of 320px.
I checked the CSS styles using Firebug to see what's going on. I only see the #media (min-width: 360px) and (max-width: 479px) part being applied. That is, its not a case where the CSS rule I think should be applied is being overwritten. What's happening is the rule is never applied at all. Why?
Sometimes browsers just simply don't allow for a viewport to be smaller than a certain size, and I think that line is down around 360, so it may simply not be registering, even with the tool you mention. I can't say, because I'd need to see the live example.
Have you checked the site on an actual mobile device, or at least an emulator? The Opera Mobile Emulator is pretty easy to use.
As an aside, if you want to work mobile first - there is the idea of writing your CSS for 320 devices first, with no media query, as the 'baseline' experience. That is where you specify font families, colors, generally applied styles. Then you add in media queries to work on larger and larger sizes, and that is where you specify changes in layout and text size. The point being - don't wrap your 320-359 styles in a media query as it will be the basic experience for everyone.
If you wish the 320px rule to be applied for all the page you need to write it like this
#media (min-width: 320px)
without any and (min-width....) after it