After completing my whole website I was introduced to media queries as a way of making my website responsive. The thing is that even though I found many resources on Media queries and I know what to type they just don't work at all.
I first tried to test a media query in order to see how it works.
This is the code:
<style>
#media screen and (min-width:600px){
#bigfont
{
font-size: 80px;
line-height: 79px;
font-family: dosis, sans-serif;
font-weight: 300;
}
}
</style>
"bigfont" is already a style in css. So when placing a media query it is supposed to bypass the original style and apply the new parameters.
Since my laptop screen's width was larger than 600px I was expecting it to work but it didn't. My goal is to use media queries in order to scale up my content when it comes to a really big screen.
I even changed min to max just in case with no result.
UPDATE :
I forgot to mention that I already have this:
<meta name="viewport" content="width=device-width, initial-scale=1">
You need to add a viewport meta element to the head of your HTML page(s) for media queries to take effect. E.g.
<meta name="viewport" content="width=device-width, initial-scale=1">
Have you tried with #media all and (min-width:600px){? That usually fixed it for me.
If that does not work, try setting the values as !important (overwrites everything so far so you need to keep the !important part for larger screens, as you have min-width, and smaller if you have max-width).
#bigfont
{
font-size: 80px !important;
line-height: 79px !important;
font-family: dosis, sans-serif !important;
font-weight: 300 !important;
}
Mine only worked after I put the media query block after the original code.
So like this:
Main code{
.whatever{
}
#whatever{
}
}
#mediaquery{
.whatever{
}
#whatever {
}
}
Put !important tag i.e 'font-size: 80px !important;' to apply the new parameters
Related
I have this simple html file and I am trying to understand why my font size doesn't scale down when I move to mobile view. I though font-size:7em would adjust when moving from desktop to mobile.
I know this is super silly, but I can't understand. Do I need to use a #media query?
`
body {
background: black;
font-family: "Big Caslon";
margin-top:3em;
margin-bottom:3vw;
margin-left:12vw;
margin-right:12vw;
}
section {
color: white;
padding: 1em;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.title {
font-size:7em;
margin:10px;
}
<html>
<head>
<title>ShopDoran</title>
<link rel="icon" href="">
<link rel="stylesheet" type="text/css" href="doran.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<section>
<div class="title"> D O R A N </div>
<p style="font-size:2em; margin:10px;">coming soon </p>
</section>
</html>
`
First up you need to make sure you understand the different values css offer us so you can get a better idea of when to use each one.
The correct way to solve this would be for you to set up a #media query in your css file so it can change its values depending on the size of the screen, in this case 600px or smaller.
I would also recommend using rem instead of em's, as nesting em's might not always workout as you expect if you don't fully understand how it works, as for rem it is always based on the root font size so it's more predictable,
#media screen and (max-width: 600px) {
.title {
font-size: 2rem;
}
A more modern approach and a bit easier but sometimes chaotic would be to approach the font-size: with vw values which takes the viewport width as a value and depending on the amount of screen space the font will grow, this is not always recommended as text can get to big so you need to limit the max size for things not to get to crazy which you can do with the clamp:() function which is a more reliable way of using vw units in font-size: and keeping everything under control, you would end with something like this:
.title{font-size: clamp(2rem, 5vw+1rem, 7rem);}
hi #giaggi do use the unit '''font-size:7vw''' for the font size it should fix the issue
I think you should check the CSS Unit as #Burham B. Soliman mentioned, But I will draw a guideline on how you can make it:
1- Add Font size into your HTML body like this:
html{
font-size:16px;
}
2- Size the element font like this:
title{
font-size: 3rem;
}
3- Set A Media Query for desire viewport size (for example 600px):
#media only screen and (max-width: 600px) {
html{
font-size: 10px;
}
}
There are also other ways that you can handle this. It is just an example.
I'm trying to get a button to have a responsive width based on the screen size. I've got it so it works perfectly when I resize a regular Chrome window, but when I toggle the display to mimic a device (any mobile device/ipad/etc.) the width of the button immediately gets much smaller. It looks the same even when I open it on my iPhone, so it's not just some weird issue with Chrome's tools. When I inspect the element, I can see that width has been disabled:
I thought there might be some CSS overriding it, but then that doesn't explain why this behavior disappears entirely when I'm simply resizing Chrome or even picking one of the devices with wider resolutions than any of my rules. I have still tried removing all of my #media rules and the behavior persists.
The button is pretty basic HTML, and it's not even wrapped up in a div that could be causing the issue (unless the fact that there's a flex box right under it could be a problem?):
<body>
<button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>
And all of the relevant CSS is here:
#ranking-button {
position: fixed;
top: 0;
right: 0;
margin: 20px;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
color: black;
background-color: #ffcc00;
width: 40%;
height: 60px;
cursor: pointer;
border: 0em;
}
#ranking-button:hover {
background-color: black;
color: white;
}
button:focus{
outline: none;
}
#media (min-width: 600px) {
#ranking-button {
width: 200px;
}
}
I've also tried adding !important to it, and it then did work for mobile - but then stopped changing for any other resolution and was stuck at 40% all the time.
I'd given up on this minor side project, and then randomly realized what I'd done wrong while doing something completely different - in case anyone makes the same mistake as me, I'd managed to forget to set the viewport. Adding this made the CSS work:
<meta name=viewport content="width=device-width, initial-scale=1">
When you use a #media query, it does anything inside it when the 'rules' inside the brackets are accepted.
So, if you say that max-width:1000px then, if your browser is 600px then anything inside it will apply, if not, then it will be ignored.
For screens smaller than 600px, your normal #media css rule will be accepted and there you said width:40%, and you can't measure in %.
#media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
On our website we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <td> tags, are rendered in the same size.
However, when rendering the website on a mobile device, the font size of the texts within the <td> tags shrinks. See below. We tried to set
html {
-webkit-text-size-adjust: none;
}
but this only helps with the problem on the mobile safari and opera browser. Using the tips from this website, we added
#media (max-width: 960px) {
td {
font-size: 20pt;
}
}
to the css, but this now miraculously only works for one of our phones held tilted sideways, not in portrait.
How do we prevent the font-size within the table cells to be scaled down?
What Olli and JStephen said, but I also had to add text-size-adjust: none;
html,body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
You were most likely looking for this:
Include the following <meta> tag in the document's <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
It helped me with the same problem.
Maybe if you also add body to the css like this:
html,body { -webkit-text-size-adjust:none; }
Resource: iPhone/iPod - prevent font-size-changing
I know this is an old post, but I came across it and found the answer that worked for me is just an extension to Olli's. There are more css styles you have to add to support other browsers:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
I had originally put everything in table cells which worked on my nexus, but my samsung phone was still randomly deciding which text to scale and which to keep the set size. I set 13px to everything on the page and it was the only font size styling I did. This was the only way I was able to fix it on all the devices I have.
First of all, font-size should be set relative to a default-value that is defined by the html selector, in case of repsonsive formatting.
For example:
html {
font-size: 100%;
}
h1 {
font-size: 2em;
}
td {
font-size: 1.25em;
}
The reason for this is that different platforms use different default values for 100%. E.g. desktops use 16px but mobile browsers often use 24px.
If you define the font-size of one of your elements to an absolute value, it will not scale with the rest of the items that have been assigned no value or a relative value; thus resulting in this behaviour.
The best solution to this problem: use relative font-sizes with em, rem or even % as the unit, istead of the absolute font-sizes with pt or px as the unit.
Edit for more background on the different default font-size on different platforms:
Because each platform has its own use-case, its own average screen size, average reader-to-screen distance, average DPI-value for its screen and (most important of all) a different viewport width, font-sizes aren't equally legible on each of those platforms if set to a fixed size. That's why the browsers define the default size to something different, as to optimise the experience for the user on that specific platform.
Sure, you could ignore this and keep setting all your font-sizes to something fixed, but that's going against the flow and breaking the user experience. Instead, try to make peace with this fact and be sure that it all scales properly.
Edit2: To warn you about the usage of em vs rem: using em will inherit the parent value and multiply it by the value of the font-size you define in your current element, while using rem will always be based on the value that is set in the root element instead of the parent element. So the following code will result in the following absolute values:
HTML:
<html>
<...>
<body>
<div>
<p>..</p>
</div>
</body>
</html>
CSS:
html {
font-size: 100%; /* we agree on 16px for this example */
}
div {
font-size: 1.25em; /* add a quarter of 16, so 20px is the actual value */
}
p {
font-size: 0.8em; /* subtract a fifth of the value of the parent element: 20 * 0.8 = 16 again */
font-size: 0.8rem; /* subtract a fifth of the value of the root element: 16 * 0.8 = 13.8 (will be rounded by browser to 14) pixels */
}
I am trying to make an adjustment to my H1 tags when the screen is at 480px width or less. Right now it's a very tall headline when viewed on mobile so I decided to add a custom #media to resolve this. Please ignore the actual CSS values as I am using drastic changes to make it obvious if the changes actually do happen.
In my CSS I tried:
#media screen and (max-width: 480px) {
.intro h1 {
font-size: .5em;
line-height: 60px;
font-weight: 100;
}
}
And used this in my head:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I've tried several variations of the viewport code, and several variations of the #media code. Including:
#media only screen and (min-width: 480px) {
.intro h1 {
font-size: .5em;
line-height: 60px;
font-weight: 100;
}
and
#media only screen and (min-device-width: 480px) {
.intro h1 {
font-size: .5em;
line-height: 60px;
font-weight: 100;
}
Etc. etc. I should mention I am using bootstrap and I am wondering if that could be causing some conflict? I have never tried to implement custom #media code with a CSS framework like bootstrap before so I am not sure of the rules here! When I view on my phone, or drag my browser as narrow as it'll get, nothing changes other than my H1 headline stacking up with the same huge font instead of getting smaller.
Any help would be greatly appreciated!
Your media queries look correct, make sure you have the media queries after your normal CSS, as it will always use the last set CSS style.
I am trying to do a responsive design and through searching online I can't get what I am looking for but I want everything to appear bigger on my website pages. Instead of doing each element for example font-size:1.4em;, how would I do for all the pages ?
Can you just add this in the header
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
From the comments I think that you don't have a proper viewport setup and that is why everything looks smaller on mobile devices :)
Try using two new CSS3 units for that, called vw and vh. Here's and introductory article: http://css-tricks.com/viewport-sized-typography/
For example (from the article):
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Browser support: http://caniuse.com/#feat=viewport-units