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.
Related
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;
}
}
The homepage/index.html seems fair enough to launch as-is for the time being. But when I look at it from chrome on mobile, all the lettering is too small - particularly in the navbar - and my parallax effect doesn't work on mobile either.
I tried making changes to the scale within the viewport, but I honestly just don't know what I'm doing. I would be so grateful if someone could possibly take a look at the website on mobile (and desktop too, if you'd like) and maybe make some suggestions on a quick cheap fix for making it more readable while maintaining its look of 'prettiness'. And if you know how to keep the parallax intact on mobile that would be amazing too!
Here are the links to the website, and to the code on github:
https://ido-weddingsandevents.herokuapp.com/index.html
https://github.com/if-true/i_do_weddings_and_events/blob/master/index.html
To make your navigation larger and your image titles on mobile you can try this CSS:
#media (max-width: 860px){
.navigation li a {
font-size: 80px;
}
.parallaxImage h2 {
font-size: 56px;
line-height: 94px;
}}
In Bootstrap you have to insert <div class="row">...</div> inside the class="container" . Better use a percentage in .navigation { width: 100%; max-width: 500px; } for mobile compatibility. Font-Awesome, PT Serif, and Delius Swash Caps are not used. Loading them is not good for performance.
If you are using #media, setup like this, for example
.navigation li a { font-size: 24px; }
#media (min-width: 768px) {
.navigation li a { font-size: 36px; }
}
#media (min-width: 992px) {
.navigation li a { font-size: 60px; }
}
#media (min-width: 1200px) {
.navigation li a { font-size: 72px; }
}
Important to use
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm sure there is a really simple solution to my problem.
I have tree media queries, but only the first two works. The 800px one is simply being ignored when viewed on phone.
div {
color: yellow;
font-size: 50px;
}
#media (max-width: 1200px) {
div {
color: red;
}
}
#media (max-width: 1000px) {
div {
color: green;
}
}
#media (max-width: 800px) {
div {
color: purple;
}
}
<div>Hello</div>
Add the meta tag to your html with initial-scale set to 1.
<meta name="viewport" content="width=device-width, initial-scale=1">
Since the code works fine in on desktop if just resizing the browser window, but does not work using chrome to emulate screen size - so this may be a problem with the emulator. You'd have to load the page onto a mobile device or try a couple different emulators to be sure.
I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).
Here's what I have tried:
I have tried putting this in my tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
No success when I try media query in a tab or in a separate css stylesheet.
I have tried removing it aswell.
I have tried these media queries for my font-sizes:
#media (max-width: 400px) {
body { font-size: 60%;}
}
#media only screen and (max-device-width: 800px) {
body {
font-size: 80%;
background-color: blue;
}
}
#media (max-width: 1100px) {
body { font-size: 120%;}
}
I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.
Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.
Thank you in advance for your help!
Your queries are a little weird. Perhaps with some logical constrains you can achieve what you are looking for? This is what I mean:
#media (max-width: 400px) {
body{
background-color: yellow;
}
}
#media (min-width: 401px) and (max-width: 800px){
body {
background-color: blue;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
body {
background-color: purple;
}
}
#media (min-width: 1101px){
body{
background-color: orange;
}
}
In my humble opinion, setting the intervals using both min-width and max-width help me visualize what's going on better. This pen shows the colors changing whenever you change the width. It doesn't do much good, but it's something to get started with media queries.
EDIT:
Pen contains transitions between colors because cool
Usually, it's better to use media queries based on minimum screen width. Here is an working example with the code you posted:
Codepen: http://codepen.io/anon/pen/eNJXXp
#media (max-width: 400px) {
p { font-size: 60%;}
}
#media (min-width: 400px) {
p {
font-size: 80%;
background-color: blue;
}
}
#media (min-width: 800px) {
p { font-size: 120%;}
}
I have a website that I need to have working on mobile devices currently it displays like the image below.
So far I have had the following ideas:
Copy the 680 lines of CSS again within the same document in between #media only screen tags.
Copy the same code into a mobile.css stylesheet and start again
"2" is my least favourite option but the most likely I am just wanting to know what your options would be?
iPhone View:
Put this in the head of your HTML
<meta name='viewport' content='width=device-width, initial-scale=1 />
It's going to take a little work but is worth it. You have to take the CSS that is too big on mobile and put them in specific media queries based on size. Let's say you want your titles to change from 80px to 40px when the screen size is less than 600px:
#media screen and (max-width: 1000px) {
.mytitle {
font-size: 80px;
}
}
#media screen and (max-width: 600px) {
.mytitle {
font-size: 40px;
}
}