When I try to set the font size and then the screen size switches to mobile phone(320px) with media screen in my custom CSS. The value still is the value on non media-screen but does not work.
My CSS:
#media only screen and (min-width: 320px) {
.card{
}
.card .title{
color:black;
border-bottom:1px solid #f5f5f5;
margin-bottom:2px;
}
.card .title a{
font-weight: bold;font-size: 10px;color:#949393;
} }
.card .title a{
font-weight: bold;
font-size: 14px;
color:#949393;
}
The problem is that the declaration of the normal style is placed after the definition with the media query. Although the media query style is being applied, it is also being overridden with the normal style which is placed further down the stylesheet.
Here is your fixed code
#media only screen and (min-width: 320px) {
.card{
}
.card .title{
color:black;
border-bottom:1px solid #f5f5f5;
margin-bottom:2px;
}
.card .title a{
font-weight: bold;
font-size: 10px;
color:#949393;
}
}
Related
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; }
}
I want to override h1 tag's font-size, but it won't do it
I have some specification for the h1 tag, but not for it's font-size:
#carousel-index .carousel-inner .item .slide_info h1 {
color: #005e9c;
font-weight: 300;
}
and for font size I have this
h1, .h1 {
font-size: 36px;
}
and this is my media query
#media (max-width: 1224px){
h1{
font-size:30px;
}
}
but it's still 36px instead of 30px
Your media queries have to be after the 'standard' rules:
h1, .h1 {
font-size: 36px;
color: blue;
}
#media (max-width: 1224px){
h1{
font-size:30px;
color: red;
}
}
See this jsfiddle:
https://jsfiddle.net/ej6phmj1/
The #media rule is used to define different style rules for different media types/devices and it have given syntax.
The proper CSS Syntax should be:
#media not|only mediatype and (media feature) {
CSS-Code;
}
In your case:
#media only screen and (max-width: 1224px){
h1, .h1{
font-size:30px;
}
}
Also, depending of the order of CSS rules (i.e. the way browser interprets them) you may need to add !important; after font-size.
You can force an override by using !important
#media (max-width: 1224px){
h1{
font-size:30px !important;
}
}
I'm trying to add full responsiveness to my website. But, for some reason, it won't read parts below 980px of width. Here's my CSS:
#media screen and (max-width:1029px){
h1{
font-size: 75px;
}
h2{
font-size: 25px;
}
}
#media screen and (max-width:980px){
h1{
font-size: 70px;
}
h2{
font-size: 20px;
}
}
#media screen and (max-width:954px){
h1{
font-size: 65px;
}
h2{
font-size: 15px;
}
}
The 980px part is the last that can be read, if I change it to 979px it stops reading it, as if it wasn't there. !important doesn't change anything. What can I do? Why is there a magical barrier of 980px?
Make sure you got <meta name="viewport" content="width=device-width,initial-scale=1"> in <head> element
I think you should realigned your media, it will be work for you may be.
I make a fiddle and it's working as you want with media query
working fiddle
#media screen and (max-width:954px) {
h1 {
font-size: 65px;
}
h2 {
font-size: 15px;
}
}
#media screen and (max-width:1029px) {
h1 {
font-size: 75px;
}
h2 {
font-size: 25px;
}
#media screen and (max-width:980px) {
h1 {
font-size: 70px;
}
h2 {
font-size: 20px;
}
}
}
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 am trying to use media queries to make my layout responsive to the screen size. I'm just testing it out at the moment and I can't for the life of me get the method to work. I simply set up a media query that's supposed to change the background color of my links to red when the screen goes below 480px, but it just doesn;t work when I shrink my screen.
You can see this in action at http://www.noellesnotes.com
Any help would be appreciated.
Here's the relevent code:
HTML:
<div class="site-navigation">
About
Work
<div class="site-title">Noelle Devoe</div>
Blog
Contact
</div>
CSS:
.site-navigation a{
width: 125px;
float: left;
padding: 50px 0 50px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
}
.site-navigation a:hover{
font-weight: bold;
background-color: rgb(242,168,134);
color: rgb(255,255,255);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
#media only screen and (max-device-width: 480px) {
.site-navigation a{
background-color: red;
}
}
change your max-device-width to max-width
#media only screen and (max-width:480px){
.site-navigation a {
background-color: red;
}
}
Should do the trick for you. Also a great page to look at is the media queries page on MDN
USE IT LIKE THIS:
#media only screen and (max-width: 480px){
}
this would be a good read http://css-tricks.com/snippets/css/media-queries-for-standard-devices/