My CSS styles which responsive for small screens don;t appear when i inspect the web page and make it a small screen. It just appear for milli seconds and then vanished.
#media(max-width:700px){
.text-box h1{
font-size:20px;
}
i'm just watching a youtube video and trying to make this web side. In the video it does appear in small screens when he inspect the web page as a side menu.
From the solution that answers the question about the difference between only screen and screen, these are the points:
#media(max-width:700px) { ... }
Styles are applied for a window with a max width of 700px.
#media screen and (max-width: 700px) { ... }
Styles are applied for a window and a screen with a max width of 700px.
As the inspector can vary the screen size, the difference can't been seen, whereas if you resize your window, the changes are visible.
Related
On the docs page of mini.css https://minicss.org/docs#modal-dialogs , there's a modal dialog example. It works, and everything's fine, just the size (width to be precise) of the dialog seems to be constant, regardless of the screen size. It's very short, even on quite wide screens. Is there a way to make it wider (e.g. to take 70% of available space)?
Perhaps the problem is trivial, yet I'm not a CSS expert. I've checked the size of div elements, and they are set to 100%. Just the modal part is rendered so small.
It is using a media query , Override that media query.
media screen and (min-width: 320px)
.card {
max-width: 70%; //try !important tag if does not work without it.
}
Or probably define your own media queries.
I'm building a responsive website. There's a separate set of CSS to apply for smartphones. To do this, I use the following code
#media all and (min-width: 760px) {
.wrap {
/*css for large screens goes here*/
}
}
#media not all and (min-width: 760px) {
.wrap {
/*css for small screens goes here*/
}
}
My smartphone has a "Screen Resolution: 1080 x 1920." but it still displays the CSS for small screens. I'm surprised this is happening because 1080 > 760 so shouldn't the first block apply? Is screen resolution not actually measured in pixels? If not, then how does one find how many pixels in a screen?
I just found 760px from an example, is there a better way to decide when to switch from full size web page to compact for small screens?
There are two different concepts: the physical pixels of the screen, and the CSS pixels.
Initially, they were in most cases the same, but with so-called “retina” or “hidpi” screens, they are no longer the same. The idea is that a CSS pixel should retain about the same size, and be independent from the actual number of pixels on the screen: you don’t want to have text with CSS font-size 12px to have different sizes on screens with the same dimensions because their pixel density changes.
So the 1080 pixel width of your phone is probably mapped to 360 CSS pixels (x3 pixel ratio).
Instead of this
#media not all and (min-width: 760px) {
use this
#media all and (max-width: 759px) {
to address all viewports below 760 width.
ADDITION, answering the question in the comment "I'm asking what does px mean since it doesn't seem to be the physical pixel count on the screen":
It used to be the pixel count on the screen before retina and similar displays were introduced, which had a multiple amount of device pixels (AKA device pixel ratio, between 1.5 to 3 time as much).
Still, when those came up, the size reference for one "CSS pixel" remained the same (i.e. one CSS pixel would be 2 device pixels on a device with a device pixel ratio of 2), otherwise all websites would be displayed at half the size on these devices. So the pixel unit used in CSS refers to "CSS pixels" not to "device pixels" unless otherwise stated (which is only possible in media queries).
Go to development tools of your browser and select body tag and after that, you will find width and height by this:
due to some CSS issue this may not work properly will be great if you create a simple HTML with the following data to get width and height:
Change your media query with this.
#media only screen and (min-width: 760px) {
// for screens above 760px
.wrap {
color: blue;
}
}
#media only screen and (max-width: 760px) {
// for screens below 760px
.wrap {
color: lightblue;
}
}
If you want to change designing based on screen size then apply only screen with your media query.
Ask for more queries.
Thanks.
I want to make a media query to target just my phone. What breakpoint(s) would I use?
For instance, my body max-width is 800px wide with 2px margins. When the window is less than 800px (mobile?) i want the margins on it to be 0px (this works on my browser). Turns out that my phones screen is hi-res and therefore the width of the display never goes below 800px!
Is this because of pixel ratios?
What do I do?
The meta-view-port tag changes how websites are displayed on your phone, or other small screens that may want to 'adjust' a website for you.
Some screens, for instance - an iphone 5 - with no meta-view-port tag, will size the website to fit your screen / but like a little version of your website zoomed out. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A combination of a view-port tag, and a media-query in your styles would allow you to change your style rules depending on the screen-size. It's kinda best just to make the breaks where things get ugly and not based on the screen sizes of "Today" that will change next month.
I would suggest building from the smallest screen first and moving up as you go with styles like this:
html {
height: 100%;
background: blue;
}
#media (min-width: 400px) {
html {
background: red;
}
}
#media (min-width: 850px) {
html {
background: green;
}
}
etc.
https://jsfiddle.net/5qhmrym5/
If you already have your site built.. and you really want to target the smaller screens, you can use max-width instead of min-width - but I've found that it takes more time and energy to override styles on the way down - then it does on the way up because styles get more complex for larger screens.
#media (max-width: 850px) {
/* styles */
}
If what you want to change is margin value when viewed on mobile you should design your display for use on any screen above the mobile size, 800px wide for you, then create a media query, similar to the ones in the link commented by #Hynes, which changes just margins to 0px.
You are correct in assuming your device is 800px wide due to ratios, but it also has to do with resolution, which are similar topics here. If you imagine a sports jumbo screen, a pixel is nearly an led in size, vs a 1080px display laptop, where the pixels are nearly unobservable. Ratios and resolutions are the reasons displays are tricky to make, and why values such as em's and percentages have come to be, to bypass the differences in display. This is also a large reason of why media queries are so useful
html {
box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}
Try using box-sizing: border-box on your css and also percentages, this is the way I like it, but surely you will find plenty of information about it, just google it.
Found the solution: https://stackoverflow.com/a/18500871/5906166
You need to include this in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Explanation:
Fortunately, you can specify a viewport meta tag in the <head> section
of your document in order to control the width and scaling of the
browser's viewport. If this tag has a content value of
width=device-width, the screen's width will match the device
independent pixels and will ensure that all the different devices
should scale and behave consistently.
So using the following code with template I can set when responsive mode kicks in.
#media all and (max-width: 680px)
However is there a query that if the browser width goes below for ex. 380px responsive, items stop minimizing etc. and stay at what would appear at 380px responsive only. So if someone was minimizing browser or had viewport of 280 they would be viewing what it looks like at 380px responsive but with scroll bars?
Any help would be appreciated.
Thanks.
You could simply set a min-width on the body element.
Example Here
body {
min-width:380px;
}
Bootstrap doesn't offer that level of control but you can simple add the following media query and then impose styles on elements on screen sizes smaller than 380px wide.
#media all and (max-width: 379px) {
// Style elements specifically for screen sizes less than 380px
}
If I opened this on a screen 800px wide, would both the small and big jpg be loaded? or is the browser intelligent enough to ignore the smaller image?
#media screen and (min-width: 480px) {
div {
background-image: url(images/small.jpg);
}
}
#media screen and (min-width: 600px) {
div {
background-image: url(images/big.jpg);
}
}
Since both media queries will be fulfilled and both rules use the same selector, the second div rule will take precedence, and only big.jpg will be loaded for any div. Once you resize the browser window until the second rule no longer applies, it should go ahead and load small.jpg.
I made a quick test page with your CSS. Firebug's Net panel verified that big.jpg was being loaded at my usual browser size, and small.jpg only loaded once I made my browser window narrow enough.