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%
Related
I have built a simple page and embedded a couple of Instagram posts.
https://bjoernschefzyk.co
The problem was, that in 100% of cases the Insta widgets increased the width of the container div, which introduces horizontal scrolling on mobile. I partly solved this by putting the Insta code in a div with width: 300px;, however on Chrome on Android and for some reason also the LinkedIn in-app browser on iOS, that doesn't work consistently. The problem seems to be that the Instagram widget renders wider initially, then gets resized, but at that point the container div is already wider.
Here an example of how the issue looks like:
Any ideas how I can fix this?
You are having max-width: 500px property applied to container, iframe( 540px) and content section, so it extended to reach it's max width on smaller screens. This is the matter of responsive. So change the max-with to 100% when the screen is smaller than 500px:
#media screen and ( max-width : 500px ) {
#content {
max-width: 100%
}
}
Next, the width of the '#content' element is still exceed the view width because your box-sizing property by default is content-box which mean the width is 100% + padding + border px . Change it to border-box instead, then the final CSS should be:
#media screen and ( max-width : 500px ) {
#content {
max-width: 100%;
box-sizing: border-box;
}
}
I'm creating a site using bootstrap.
I would like to prevent the window from resizing at all from a certain point and downwards.
I currently have it set at:
html, body{
min-width: 300px;
max-width: 3000px;
min-height: 550px;
max-height: 1500px;
}
seems to work perfectly for the width, once the window reaches 300px in width, the width of the window locks and cannot be scaled down any further.
for some reason though, it will not work for the height, no matter what parameters and dimensions I set, I can fully scale the height of it.
Not sure how to work around this so that once the window reaches 550px of height, the height also locks and cannot be scaled down any further.
Any help would be appreciated. Thanks!
thats not an an issue, actually what you are saying, is device width not the document or window width, if you are worried about responsiveness, no device exist on the world whose height can be changed, atleast i dont know,
this should not be an issue, you are scaling the browser's(device) height and width , but the actual window sizing is working same like the width, ,,
i mean that css code is working fine, but you cannot notice that,
It's because max-height overrides height, but min-height always overrides max-height. So you can't use them in the way you intend.
You need to target with media queries:
body { height:550px }
#media (min-height: 550px) { body {height: 100vh }}
#media (min-height: 1500px) { body { height: 1500px }}
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;
}
}
Say I have a 400 px wide and 250 px high image. The user resizes the screen or loads the page on a smartphone.
Say the screen width is 320 px wide. The 400 px image won't fit.
Is there a way to automatically resize the image (and keep proportions) when the screen is not wide enough, using CSS?
In other words the image should be resized from 400px wide to 320px wide (for example).
Use
max-width: 100%;
Google responsive images for more information.
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
No need to use mediaqueries for this specific case: just define
#yourimage {
width: 100%;
max-width: 400px;
}
this will ensure a full-width image for every viewport width up to 400px
You need to specify both min and max:
demo: http://jsfiddle.net/abhitalks/Vv9RT/
css:
img {
min-width: 220px;
max-width: 420px;
width: 100%;
}
Try changing the panel size in the fiddle. min-height will ensure a minimum acceptable size when the screen size gets too low. max-height will ensure a maximum size so that it doesn't get huge.
100% width will keep it within bounds.
by using the css3 media queries u can do make possible
ex: #media screen (max-width:480px){
img{
width:320px;
}
}
or
img{ max-width:100%}
or else you can use both.. 'img{ max-width:100%}' place before the media quires
I have some question about html and css.
Here are the case. I'm building a mobile web, which my base line is 240px width. So all my elements's dimension is set base on the 240 screen size. But when I view the web in a larger phone like Samsung Galaxy note. All things seem to be too small for user to click on it.
Now the question, is it possible to use variable kind of css for width and height ??
Lets say, the thumbnail I use in 240px width device is 50px, so when I view my thumbnail in a 480px width device, the thumbnail will be display in 100px, which means the thumbnail will be increase its size based on the percentage of the screen increased.
Yes, obviously you can, what you are looking for is called Responsive Design, to accomplish that, you will need #media queries.
Demo (Resize the window to see the effect)
div {
height: 200px;
width: 200px;
background-color: tomato;
}
#media all and (max-width: 400px) {
div {
height: 100px;
width: 100px;
}
}
Use percentages for your width instead of fixed width to make the images responsive.
For example, use 100% instead of 50px. It will automatically fill the container (in which the container is also responsive) and automatically resize on your browser.
yes ,it is possible,responsive design achieve in following ways,
All dimension in %
media queries
yes, you can use #media queries for responsive design
example:
div{
width: 50px;
}
#media all and (min-width: 480px){
div{
width: 100px;
}
}
(or) u can also use percentages at certain cases like width: 20%