I would like the content of my website header to occupy 100% of the screen width on regular-sized desktops/laptops, but to be centered on larger displays. By "larger displays", I'm referring to the actual size of the display too, not just the resolution. On my 15" laptop and my 23" desktop (both having the same resolution of 1920x1080), I would like the displays to be different. Having such a wide menu on a 23" display doesn't look good as there are wide empty parts.
I'm currently using a .container BootStrap class for the contents of the header, and I overrided a media query so that the container has a width of 100% when the screen width exceeds 1200px. Again, this isn't really what I want :
If the screen width exceeds 1200px, the header width should be 100%
If the screen width exceeds 1920px, the header width should be the default one, and the header should be centered
If the screen width exceeds 1200px, and the screen itself is large (anything above 19"), the header width should be the default one, and the header should be centered.
I'm not sure if that's the best approach, but I'm open to all suggestions.
Thanks
My solution was to use media queries based on pixel density
This allowed to write something like
#media screen and (max-resolution: 116dpi){
116dpi is the DPI of a 19" screen with a resolution of 1920x1080. If the screen gets larger, say 23" with the same resolution, pixel density gets lower, then we have something below 116dpi.
Try out setting media screen and limitation through min-width.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media screen and (min-width: 1200px) {
.container {
width: 100%;
}
}
#media screen and (min-width: 1920px) {
.container {
width: 500px;
}
}
Related
I use a 1920px wide screen. But when I inspect the html tag with chrome devtools on websites such as firebase or facebook messenger, this is what I see :
But these websites appear fullscreen, so I expected them to match my screen width.
Why is there a difference between my screen width (1920px) and the html tag width (1440px) and how to achieve this ?
If you set the width of the body of your HTML to a fixed width of 1440px, it will be 1440px even if the user screen is bigger or smaller than this. What you can do is set width to width: 100%; and a max-width: 1440px. That would make the size of the body to be the size of the screen if the screen is smaller than 1440px and 1440px if the screen is larger or equals to 1440px.
If I understood correctly what you are asking, you have a sidebar menu and a dashboard that needs to fullfill the screen. In that case, you could do:
.side-menu {
width: 20%;
}
.dashboard {
width: 80%;
max-width: 1440px;
}
#media (min-width: 1500px) {
.side-menu {
width: 100%
}
}
Using media-query makes you set different CSS properties for the elements in your HTML, depending, in this example, of the screen size. What I did: if the screen size is smaller than 1440px, the sidebar fills 20% of it and the dashboard fills 80%. If the screen size is bigger or equals to 1500px (a little big bigger than the max-width of the dashboard, to fit the sidebar also), the dashboard stays at 1440px and the sidebar fills the rest of the screen width (width: 100% makes the sidebar takes all the width that is left of the body).
Obviously in bigger websites such as Facebook etc it's a much more complex thinking than just CSS, because they have to consider the data flow, the device the person is using and many other things.
Either you have setup a DPI scaling on your PC or have the zoom level in your browser to something higher than 100%
I've made a website that stretch a container to the bottom. In that container, there are divs that fit perfectly the screen at low resolution such as 1366x768 ...etc
But when the resolution is higher (1440x900...etc) There is a blank space left under the divs (link to view website at different resolutions)
So is there a possibility to fill that space with divs only in high resolution ? I've tried overflow-y:hidden,but since the container's height must be in auto it doesn't affect it.
Use media queries that target resolution like
#media screen and (min-resolution: 300dpi) {
#myDiv{
display:block;
}
}
Alternatviely, you can target dimension such as width like
#media screen and (min-width: 1000px) {
#myDiv{
display:block;
}
}
I'm developing a site that is 600 pixels wide and using responsive queries to make it fit in different devices. I'm using the following code:
<meta name="viewport" content="width=device-width" />
#media only screen and (min-width: 320px) and (max-width: 480px) {
/* iPhone */
.container { width: 100%; max-width: 480px; }
...
}
#media only screen and (min-width: 768px) and (max-width: 1024px) {
/* iPad */
...
}
I have a problem with the iPad, though. This device viewport is 768 pixels wide, and therefore the site renders correctly but is shifted to the left because its width is narrower.
My question is, is there a way to center the site or alternatively make it fill the whole iPad screen?
Thanks in advance
Try this:
<meta name="viewport" content="600" />
More on that here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Or to centre the container (assuming it's 600px wide)
.container {
width:600px;
margin:0 auto;
}
Though it may be worth making the site larger in the first place.
Why make the site 600px wide? You should make the site fill the 100% of the viewport by default, and then adjust the margins around the content, font-size, the size of the images etc. for each screen size so that the content adapts.
You could take this site as example. If you try making the browser window bigger and smaller you'll see that all the content adapts (and even a mobile menu appears when the viewport is that small) All of that is accomplished using media queries for different screen sizes.
(Sorry about my syntax)
I got a problem on a website http://madamrimma.by/, when browser scale is less then 100%, the website is displaying incorrect: http://joxi.ru/qlrGUhjKTJBMAUGBReA. This website is not created by me and i don't understand how it happened.
This is because downscaling the browser actually increases the width of the page in pixels. While the browser may occupy say, 1024px, when the page is downscaled, the number of pixels as represented in the DOM is actually more than 1024px.
Additionally, there are media queries that control the appearance of the page. If you look at #wrappen, the following CSS exists:
#media (max-width: 1920px) and (min-width: 1025px)
#wrappen {
width: 1170px;
margin: 0 auto;
box-shadow: 0 0 20px #f25aeb;
background: #fff;
}
When you downscale your browser, the number of pixels as represented in the DOM is more than 1920px. Hence, the fixed-width layout imposed by #wrappen is ignored, and the layout breaks.
If you have an extremely high-resolution monitor, you can also resize your browser window beyond 1920 pixels and have the same effect.
The Fix
The fix for this is easy. Simply remove the offending max-width media query. Of course, this is not optimal for high resolution screens, as most space is wasted, but at least the layout does not break.
The main problem is having fixed widths to the div elements in the code. Change them to %'s so that it will be fixed. Every element should be center aligned.
I use this media quires:
/* Mobile styles go first, without media
queries. */
#media only screen and (min-width: 321px) {
/* Larger mobile styles (wider than 320
pixels) */
}
#media only screen and (min-width: 600px) {
/* Tablet styles (wider than 600 pixels)
*/
}
#media only screen and (min-width: 1024px) {
/* Large laptop styles (wider than 1024
pixels) */
}
#media only screen and (min-width: 1140px) {
/* Desktop styles (wider than 1140
pixels) */
}
for each resolutions and it works.
Here is an example. If I, for example, set body to 70em and then adjust the browser width this rule
#media only screen and (min-width: 481px) and (max-width: 1024px)
{
body
{
background : #B0E0E6 url(img/bg.jpg) no-repeat;
}
}
is true when the width is between 481px and 1024px.
But when I have the width:70em given in body the content is not being adjusted when I make the width for the browser smaller.
If I now change a little and set the width in the body to be 80% now the content is automatically being smaller when the width of the browser is smaller.
It seems to me that it's not possible to both being able to catch when the browser is for example between 481px and 1024px and at the same time shall the content being able to be smaller when the browser width is made smaller.
So my question is if it's possible to both being able to catch when the width of the browser is between 481px and 1024px and at the same adjust the content automatically being adjusted when the width of the browser
You set the width to 70em. That's a fixed width (more or less considering it's based on font size). Within the media query you do not set the width anywhere. You just set the background. You would need to adjust the width of the object you want to resize within the media query. So if you have
body{
width:70em;
}
#media only screen and (min-width: 481px) and (max-width: 1024px)
{
body
{
background : #B0E0E6 url(img/bg.jpg) no-repeat;
width: 50em;
}
}
That would resize the body based on the media query that you specify. Also, you may wish to look up CSS units to make sure you want to use em (because by your description, % may work for your needs): http://www.w3schools.com/cssref/css_units.asp