I am trying to take my first forray into using "responsive" css, and I am working with this new #media ....... thing... and I am having a big of trouble understanding some of it. I have read up on it on multiple websites to form my code, and it isn't doing what I expected it to do, so I am getting more frustrated.
I basically have a place in text where, under normal circumstances, I want it to be font-size: 64px;, but if the screen gets very small (480px), I want it to be downsized to like 24px;. I added some other ridiculous properties to make sure I am actually getting the different result, but I am quite confused still.
So this was my approach...
#media (min-width: 480px) {
.name {
color: green;
font-family: "Comic Sans MS";
font-size: 24px;
}
}
.name {
font-size: 64px;
}
<span class="name">This is a really long name</span>
So I expected that when this runs, it will have the normal .name class, and if the resolution dips to 480px or thinner, it will go to the other one. Is this completely wrong? Because this is not what is happening for me.
The .name selector within the media query has the same specificity as the .name selector after the media query. Because of this, the later .name selector will take precedence.
Simply changing the order will fix the issue:
.name {
font-size: 64px;
}
#media (min-width: 480px) {
.name {
color: green;
font-family: "Comic Sans MS";
font-size: 24px;
}
}
If you'd like the styles within the media query to take effect when the screen is 480px or thinner, you should be using the max-width media query:
.name {
font-size: 64px;
}
#media (max-width: 480px) {
.name {
color: green;
font-family: "Comic Sans MS";
font-size: 24px;
}
}
Related
I am wanting to change the font size of some text in an HTML email at 2 different screen widths with media queries. This works as expected on all devices/clients except in Outlook App for iOS.
Here is an example of the inline HTML:
<td class="para" align="left" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family: Times, 'Times New Roman', serif; font-size: 17px; color: #333333; line-height: 24px; text-align: left; text-indent: 29px; padding: 20px 0 0 0;"><span style="font-family: Times, 'Times New Roman', serif !important;">some text here</span></td>
Then I have the following CSS:
<style>
#media only screen and (max-width:600px) {
.para {
font-size: 18px !important;
}
}
#media only screen and (max-width:445px) {
.para {
font-size: 20px !important;
}
}
</style>
If I only have one of the media queries, it works as expected in the Outlook App for iOS, but when I add the second one it no media queries work at all.
Am I doing something wrong or is this just something that you have to work around with iOS Outlook?
The issue is due to a bug in their implementation, as documented here: https://github.com/hteumeuleu/email-bugs/issues/92
The easiest solution, since perhaps your minifying code may be removing whitespace and creating the double curly braces, }}, is to close the style block and start a new one, i.e.:
<style>
#media only screen and (max-width:600px) {
.para {
font-size: 18px !important;
}
}
</style>
<style>
#media only screen and (max-width:445px) {
.para {
font-size: 20px !important;
}
}
</style>
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 am administrating a new site, where I have a problem with fontsizes. On the desktop version it is looking fine, but on mobile devices the text is way to big.
.blog {
h2 {
a {
font-size:inherit;
font-weight:inherit;
color:inherit;
}
}
How can I control the font on mobile devices? Can I somehow add something like:
#media screen and (max-width: 768px){
.h1, h1 {
font-size: 1.5em;
}
.h2, h2 {
font-size: 26px;
}
or is that the wrong way to do it?
With this solution the code would look like?:
.blog {
h2 {
a {
font-size:inherit;
font-weight:inherit;
color:inherit;
}
#media screen and (max-width: 768px){
.h1, h1 {
font-size: 16px;
}
.h2, h2 {
font-size: 12px;
}
}
It is a correct way to use it.
However here are some tips :
Prefear using px over em
because the interpretation of em and ex depends on the OS. px will show the same size no matter what OS you are using.
You can use relative values : %
% will make the font size proportional to his parent font size. This is very good for responsive design so you are going to change only one font size, the parent.
You can use this link for more information on what unit to use and why.
EDIT :
Your code needed some corrections : your CSS missed some }so I fixed it and was able to make your code work.
.blog {
h2 {
a {
font-size:inherit;
font-weight:inherit;
color:inherit;
}
}
#media screen and (max-width: 768px){
.h1, h1 {
font-size: 16px;
}
.h2, h2 {
font-size: 12px;
}
}
}
JSFiddle here
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