I'm creating a website that is responsive when I resize the window. None of the responsiveness works when I toggle device mode even though I'm going below the breakpoints. I don't understand why it works in the normal browser when I trigger the break points but not in device mode. What am I doing wrong?
// style.css
html {
font-size: 62.5%;
}
#media (max-width: 75em) {
html {
font-size: 56.25%;
}
}
#media (max-width: 56.25em) {
html {
font-size: 50%;
}
}
#media (min-width: 112.5em) {
html {
font-size: 75%;
}
}
Thanks.
The mistake you made was by not adding only screen and. Try doing:
#media only screen and (max-width: ...) {}
Related
I'm having hard time trying to fix this small issue with my website, so the body text shows in white on the desktop, which is good, but when I use the smaller devices I don't want the text to show white because it collapse with the white background and you can't read the text. How can I change it to another color for mobile versions, with CSS, or HTML?
This Is How It Shows On Desktop
This Is How It Shows On Smaller Screens (Phones, Tablets, etc)
Edits from Stackoverflow (that didn't work)
CSS:
#media only screen and (max-width: 600px) {
.mob1 {
color: #ffffff;
}
}
#media only screen and (min-width: 600px) {
.mob1 {
color: #000000;
}
}
HTML:
<p style="color: aliceblue;" class="custom-article wow fadeInDown" data-wow-delay=".2s"><span class="mob1">Changed Text</span></p>
I tried to add the mob1 to the p class, didn't worked either.
Try to use media queries.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
For more details: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
try this
on the html file, if it is a p element, or whatever type of text element it is,
<p class="colourTest">TEXT</p>
in the css file:
//for screens smaller then mobile
#media only screen and (max-width: 600px) {
.colourTest {
text-color: black;
}
}
//for screens bigger then mobile
#media only screen and (min-width: 600px) {
.colourTest {
text-color: white;
}
}
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
I am updating a text element which ID has if7ou.
Issue is that if user update style on mobile view first and then the tab view then media query do not work for tab view. If we update style for desktop first, tab second and mobile third then everything works fine
but if we reverse the step mobile view first, tab view second and desktop view third then css/media query will not work for tab and desktop view.
So I want any option that we can add css in any order either 480 first and 992 second or vice-versa css should be apply based on device size not the based on order on which they come.
#media (max-width: 480px) {
#if70u {
font-size: 20px;
}
}
#media (max-width: 992px) {
#if70u {
font-size: 40px;
}
}
I think it was due to 480 should be down and 992 should be above.
Any help would be appreciated, thanks!
I would suggest to use min-width instead of max-width. This will ensure that the 992px styles will not load or appear in your mobile view. It will also better satisfy the requirement of "mobile first", in that you are only loading mobile styles for mobile, and then adding tablet styles only when the viewport grows for tablet, and so on. This will also solve your issue.
#if70u {
font-size: 20px;
}
#media (min-width: 481px) {
#if70u {
font-size: 40px;
}
}
In general, I use max-width sparingly, and often, when I do need it, it's because I created some sort of crappy code that has consequences later on down the waterfall.
In this case you should use mobile-first technic, declarations on the main class apply to mobile, then you increase your media-queries to bigger devices, take a look:
#if70u{
font-size: 14px; //Its apply for mobile
}
#media screen and (min-width: 768px){
#if70u{
font-size: 16px; //Its apply for tablets
}
}
#media screen and (min-width: 992px){
#if70u{
font-size: 18px; //Its apply for small desktop screens
}
}
#media screen and (min-width: 1200px){
#if70u{
font-size: 20px; //Its apply for large desktop screens
}
}
In addition to #S. Dunn answer.
If you want to set a style to specific minumum and maximum width you can use this:
#media only screen and (max-width: XXXpx) and (min-width: XXXpx)
So in your case it would be:
#if70u {
font-size: 20px;
}
#media only screen and (max-width: 992px) and (min-width: 481px) {
#if70u {
font-size: 40px;
}
}
I have issues with my media queries. It seems like they do not work in either browser. I tried in Opera, Chrome, Firefox. This is the page http://amatalents.com/about-us.html and those are media-queries for main div section
#media screen and (min-width: 150) and (max-width: 400) {
.windows div {
width: 100%;
display: table-column;
}
.windows div a {
font-size: 10px;
color: green;
}
.windows {
background-color: red;
}
}
I also validated the css file and first time it did fine and only mentioned the css parser error reffering to media queries part of the file, but the second time it referred to media queries only without mentioning parser error.
I am lost...
Please help!
You are missing px.
#media screen and (min-width: 150px) and (max-width: 400px)
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%;}
}