I'm using a CSS Media Query to adjust the look of my page if it is very narrow. In my simplified example, if the page is less than 300px wide, I'll make the background blue.
#media all and (max-width: 300px) {
body{ background-color:blue;}
}
I recently discovered that if the user zooms (Ctrl+Scrollwheel or on Chrome Wrench>Zoom) that the max-width will still kick in at 300 actual pixels, not 300 zoomed pixels. This can break sites with more sophisticated layouts. Is there any way for the max-width media query to handle users with zoomed browsers?
I've experimented around and it seems that you can use media queries for a zoom, however in a Webkit browser you must define the viewport.
Related
I have written some HTML and CSS for a website, and some media queries to reformat the code when the screen shrinks. This works on browsers, when I shrink the browser window size, but isn't working on mobile devices. Can anyone think of why? See the Media CSS below:
#media screen and (max-width:500px) {
#education-table td {
display: block;
text-align: center;
}
}
Thanks in advance!
I have looked at similar issues and thus added the "screen and", but this has not fixed the issue.
Update: I am testing the code on a pixel 7. When resizing the browser to the same width as my phone it works perfectly. I have ensured my phone width is indeed below 500px. TO clarify, this code works when used on a browser where I have both emulated a pixel 5 (through dev tools on edge) as well as just resizing the browser window. However, when I load the same site on my pixel 7 (and a pixel 6a, + Samsung galaxy a30) this CSS does not kick in, and it loads the standard "desktop" CSS styling - so the columns of tables do not collapse and are impossible to read
This code is valid CSS and works like intended. It just applies to devices with screens smaller than 500px. I would recommend you to set the size to something higher like 768px.
The screen and just ensures that the style is only applied to normal screens and not the print-view or anything else.
As others mentioned, your code is correct and should work on mobiles, it just depends on their screen size.
If you want to reformat your layout for mobiles in portrait orientation independently of their screen width, you might want to consider the following:
#media screen and (orientation: portrait) {
#education-table td {
display: block;
text-align: center;
}
}
Solved it!
I needed to add this line to the HTML document -->
It was not linking the device width before I added this meta tag. Thanks for the help from you all
Basically, I don't want the layout and formatting on my page to become nonsensical if the user resizes the browser to a really small size. After a certain limit, the page should not get any smaller as the user resizes the browser to a smaller size. The page should stay the same size and any overflow should be hidden or use scrollbars or whatever. I tried setting min-height on the body but this had no effect at all.
btw, I am already using media queries and they're nice but don't do what my boss wants.
The only think I could think of was to make some sort of element with a fixed size and that would prevent the page from getting smaller than that element.
This is where a media query and CSS will come in handy! (Assuming you already know how to use CSS)
The media query allows you to change the styling of an HTML page based on the size of the screen by using CSS (if you know any CSS).
Use it like so (but place this below all of your CSS code):
#media only screen and (max-width:480px){
//The elements you want to change here
}
As an example, any CSS code you place in this query will apply to your page if the screen width is less than 480 pixels. You could also use min-width, max-height, and min-height for this too.
Example scenario:
div {
width:600px;
height:400px;
}
#media only screen and (max-width:600px){
div {
width:100%;
height:50%;
}
}
In a case like this, if the user is in a browser window or phone with a width of less than 600 pixels, the div will take up half of the screen.
So, instead of trying to prevent things from getting smaller, make them bigger on smaller screens and windows.
There is a more in-depth article here.
I apologize if I sound vague/ abrupt.
The web page should be in tune with the browser size. I mean if the browser size is reduced/ shrunk, the full web page should also shrink and should be visible in the shrunk browser window. Is this possible ?
You will need to use media queries for a responsive layout in your css
Example:
#media screen and (max-width: 699px) and (min-width: 300px) {
<css template for 300 to 699 px width goes here>}
You can also use bootstrap (a responsive framework which has predefined classes for what you may need) for a faster implementation.
I was searching about how to make your webpage fits any screen resolution and I found that most answers prefer using % over Pixels. I found that this is correct when I viewed the code of this website http://zcsfestival.com/
you can find objects overlap in mobile resolution or when you don't maximize the window of your browser. However, when I read the code of this site http://m3adikawmia.eb2a.com/?ckattempt=1
I found that it uses Pixels and it fits any screen resolution also when I restore the browser window down. It seems perfect. I became confused about that and I want any clarification about this point.
Thanks in advnace,
One way is to define elements with % . But some times the elements will be to small in mobile resolution that it is necessary to define different CSS codes for different resolutions. Like this:
normal situation:
.container {width: 1000px;}
responsive:
#media only screen and (max-width:800px) {
/* redefining some element sizes like the example: */
.container {width:100%;}
}
And this way will continue till mobile resolution.
I'm trying to see if your screen is a specific amount of pixels so if it's smaller that for example 1000px
this will happen:
max-width:750;
This is the pixels on the web browser like google chrome and also will get bigger when you zoom out on google chrome if possible.
Thank you.
What you're looking for can be done with CSS3 media queries. They're a way to execute CSS only under certain conditions. Here's the MDN article, too.
Your media query might look like this:
#media (max-device-width : 1000px) {
/* CSS */
}
max-width is the width of the target display area, ex:Google Chrome
max-device-width is the width of the device's entire rendering area, ex:the mobile device screen