Why is my media query min-width not working? - css

I have a h1 with font size that I want to adjust based on the screen width.
const Title = styled.h1`
font-size: 2.5rem;
margin: 0;
color: ${COLOR.blue};
#media (min-width: 600px) {
font-size: 2rem;
}
`;
I tried it on my Pixel 4a and use USB debugging. Running window.screen.width shows 393 and window.screen.height shows 851. But my font size is 2 rem instead of 2.5 rem... I tried #media only screen and (min-width:600px) but its also the same
What Im doing wrong? Thanks

If you want your css to implement on 600px device width or less, then you need to add
#media only screen and (max-width: 600px) { //your css }
When you define min-width in media query it means it will work in bigger screen than you have mentioned in media query and if you want css in smaller devices than you should add max-width in media query which will work in small devices

Related

Assistance with code to show my full webpage when i resize it to it's smallest width and/or making my webpage responsive

I am currently working on my personal website, yet I am having trouble trying to get my code to work correctly.
I am going to post pictures to show what I am looking at My website at the largest width and My website at the smallest width, and I will also add the link to my website and the link to my GitHub code
I am looking for information/code/anything that can point me in the right direction or help me get my website to be responsive to resizing
Here is the css code for my "< body >" and the "< div >" i want responsive (I am not sure if this is where i am supposed to be looking at either but i do know it all should be put in #media only screen and (max-width:1000px){})
body{
font-family: 'Press Start 2P', cursive;
margin: 0;
}
.main-area{
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
}
You are going in the right direction. Just add a few more breakpoints.
/* (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* (Large Phones, 768px and down) */
#media only screen and (max-width: 768px) {...}
/* (Tablets, 992px and down) */
#media only screen and (max-width: 992px) {...}
/* ( laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
if not possible for all of them add at least one for mobile devices (max-width: 768px) and one for tablets.
min-width means you are designing mobile first and then going upwards to larger screens and max-width means you are designing desktop first and then breaking for smaller screens.
Then inside those breakpoints add rules for the elements.
Like for your main-area you can do it something like this:
#media only screen and (max-width: 768px) {
.main{
height: "auto"
}
.main-area{
display: block;
}
}
it will make the main area look nicer for mobile devices. And like this change properties for all other necessary elements and make adjustment to make them look nicer for example making the icons bit larger and adjusting the padding etc.

Why are text not responsive in bootstrap even when em/% values are used

If em/% values are used in an non-bootstrap layout they are responsive in bootstrap no matter what text size remains the same and when vw are used they are responsive. What is the reason for this how to make it responsive without media queries.
The .lead class from Bootstrap uses Media Queries so that depending on what the device's screen width is, the font-size property will be a different value
/*---------------------
Media Queries
---------------------*/
/* Desktops */
#media only screen and (min-width: 993px) {
.lead {
font-size: 3.5em;
}
}
/* Tablets */
#media only screen and (min-width: 769px) and (max-width: 992px) {
.lead {
font-size: 3em;
}
}
/* Smartphones Landscape & Portrait */
#media only screen and (max-width: 768px) {
.lead {
font-size: 2em;
}
}
/* Smartphones Portrait */
#media only screen and (max-width: 540px) {
.lead {
font-size: 1em;
}
}
Changing the size of fonts depending on the size of the screen, is one of the most common things that I find myself doing with Media Queries
Sorry, I understood in any given document when percentages are used they are only responsive for padding, margin and other things and text are always unresponsive and they must be changed according to media queries.
Ems are always unresponsive even with padding and margin.

Website justed ignored all media queries on mobile

Website I've been working on just started ignoring all media queries. I can't seem to find the problem.
http://fnd.instinctdigitalmedia.com/
On the homepage the images under the 'Browse our Products" section shoud change based on screen width. at 320px, 480px, and 768px screen width it still shows the originals.
You must target the ancestor or parent to override what the previous query has done.
From 760px to override its style rule you should add call the parent #content of the img to override the rule in 760px
Example:
#content > img {width:25%;}
}
#media screen and (max-width : 480px){
#content > img {width:50%;}
}
#media screen and (max-width : 760px){
img {width:100%;}
}
There's a few issues I can see. Firstly, media queries aren't firing because:
There's a closing parenthese missing on line 899, flipping an error. To find this, I added my own media query showing something obvious, and pasted it at the top of the CSS, then further and further down until it stopped working.
Also, the mobile view failed because you are missing 'and' in your media query:
#media only screen (min-width: 320px) and (max-width: 480px) {}
It should be:
#media only screen and (min-width: 320px) and (max-width: 480px) {
As for the width break itself, a handy trick with responsive designs is to limit this kind of issue from ever occurring before you even start styling (this is a rough guide, not a comprehensive list):
img, video, object, iframe, fieldset, table, form, article, section, header, nav, footer {
max-width:100% !important;
}
Even when respecifying the widths of your images, you are still using pixel widths instead of a relative measurement like percentages. This means the images will stay a static size and won't resize correctly to the screen no matter what.
Lastly, you are using a 'bracketed' approach for your media queries. This means rather than allowing your existing CSS to cascade down your media queries, saving you having to specify things twice that aren't going to change, you must repeat the same code many times.
For example, you currently have:
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.product-cat-1 {
position: relative;
display: block;
margin: 0 auto 10px auto;
width: 430px;
height: 150px;
background-image: url('http://localhost/firstnations/wp-content/uploads/2014/04/home-lighting.jpg');
}
}
Anything below 768px must be specified all over again. This leads to massive amounts of repeated code, and a lot of extra work for you. The simpler approach would be:
#media only screen and (max-width: 1024px) {
/* all styles for under 1024px */
}
Then for anything smaller:
#media only screen and (max-width: 768px) {
/* only styles that need to change when under 768px wide */
}

How to work out EM based media query

I'm trying to work out how to use EM media queries in my latest project. However after some testing I've found that the media queries are ever so slightly off and I can't work out why. It might have something to do with it using the parents font size instead of the body. My body is set to 14px and my workings out look like:
$break-small: 22.8571em; //320px
$break-smallish: 40em; //560px
$break-med: 54.8571em; //768px
$break-medish: 68.5714em; //960px
$break-desk: 73.1428em; //1024px
body font size:
body{
font-size: 14px;
line-height: 1.5;
min-height: 100%;
}
*(from my SCSS breakpoint variables) From what I understand I did: 768 / 14 (base font size) = width in em's
Say I've a div called header, there is no font-size set on this div, only children of this div. Surely it would still then use the body font-size?
Ems in media queries are never based on the font size of body, or any other element for that matter. They always refer to the default font size set by the user in the browser preferences. In most browsers this default font size is around 16px, and in CSS this corresponds to the initial value of the font-size property which is medium. From the spec:
Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.
This same default font size is inherited by the root element, which is html, not body (see here). Specifying a relative font size on body just means body bases its own calculation on the computed font size of html. This being stated, note that setting font-size on html will not affect how ems are calculated in media queries either.
Your guesswork is correct, the em unit sets the font size relative to the parent element's font-size, not relative to the document root. If you're looking for the latter you're looking for the rem unit, but browser support might be a problem for you, depending on your application.
See the following Fiddle for a sample: http://jsfiddle.net/afp46/
HTML:
<span >This is text</span>
<div><span >This is text</span></div>
<span><span>This is text</span></span>
CSS:
body {
font-size: 14px;
}
div {
font-size: 16px;
}
span {
font-size: 1.2em;
}
I would change that to body font size 100% and then you have the flexibility of EMs and %s site wide
I would highly recommend you do font-sizing with rem, which stands for "root em". It's much more consistent. Read more about it here: http://snook.ca/archives/html_and_css/font-size-with-rem
Also, I would recommend adding this to your CSS:
html {
font-size: 62.5%;
}
Now, your rems or ems will be easy to convert. 10px font-size would be 1rem or 1em. Nice, right? :) Again, use rems, its a much better practice these days.
Please try this code. I have already used this my last project it working in fine. so please try.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px. */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px */
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */

How to use particular CSS styles based on screen size / device

Bootstrap 3 has nice CSS classes in responsive utilities that allow me to hide or show some blocks depending upon the screen resolution http://getbootstrap.com/css/#responsive-utilities-classes
I have some style rules in a CSS file that I want to be applied or not based on screen resolution.
How can I do it?
I'm going to minimize all my CSS files into the one on production deployment, but this could be avoided if there are no other solutions than having separate CSS files for different screen resolutions.
Use #media queries. They serve this exact purpose. Here's an example how they work:
#media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}
This would work only on devices whose width is equal to or less than 800px.
Read up more about media queries on the Mozilla Developer Network.
Detection is automatic. You must specify what css can be used for each screen resolution:
/* for all screens, use 14px font size */
body {
font-size: 14px;
}
/* responsive, form small screens, use 13px font size */
#media (max-width: 479px) {
body {
font-size: 13px;
}
}
#media queries serve this purpose. Here's an example:
#media only screen and (max-width: 991px) and (min-width: 769px){
/* CSS that should be displayed if width is equal to or less than 991px and larger
than 768px goes here */
}
#media only screen and (max-width: 991px){
/* CSS that should be displayed if width is equal to or less than 991px goes here */
}
I created a little javascript tool to style elements on screen size without using media queries or recompiling bootstrap css:
https://github.com/Heras/Responsive-Breakpoints
Just add class responsive-breakpoints to any element, and it will automagically add xs sm md lg xl classes to those elements.
Demo: https://codepen.io/HerasHackwork/pen/rGGNEK
Why not use #media-queries?
These are designed for that exact purpose.
You can also do this with jQuery, but that's a last resort in my book.
var s = document.createElement("script");
//Check if viewport is smaller than 768 pixels
if(window.innerWidth < 768) {
s.type = "text/javascript";
s.src = "http://www.example.com/public/assets/css1";
}else { //Else we have a larger screen
s.type = "text/javascript";
s.src = "http://www.example.com/public/assets/css2";
}
$(function(){
$("head").append(s); //Inject stylesheet
})

Resources