I've checked documentation on multiple sites, and they all agree that max-width should be overriding width in CSS. For some reason, though, it's always staying at 800px. This is my CSS:
.content{
width: 800px;
max-width: 100%;
}
This should be making it stay at 800px wide unless the window gets smaller, and then shrink it, right? I also tried the other way around:
.content{
width: 100%;
max-width: 800px;
}
This gives me the same result. It's always 800px, no matter what. I had thought of using min(), but it turns out that was removed from CSS (though why, I have no idea). Does anyone know what I'm doing wrong?
I should point out that I have included <meta name="viewport" content="width=device-width, initial-scale=1.0"> in my header. That has no effect.
You must know that the device-width maybe larger than 800px, if ti's larger than 800px, so your max-width:100%, will not work unless some other wider dom than 800px distract the wrapper.
Related
I am working on a React web page and I tried to see what the site looks like on mobile, so I switched to mobile view, and as you can see my element is only taking up half of the screen, so my content and my navbar and all my elements are actually only on half of the screen.
Here is my index.css
html {
padding: 0px;
margin: 0px;
overflow-y: scroll;
background-color: #ececec;
width: 100%;
}
body {
padding: 0px;
margin: 0px;
}
The table that you can see has a min-width attribute, so it can actually be seen, but its container div is also the same size as the html tag... Help!!
I noticed that the html element width is always as big as the screen of the device is, and it gets "stuck" at that point.. If I create a screen size that is 400px wide, the tag is 400px wide, and instead of wrapping all the content it's just a fixed width of 400px...
I added a min-width: 1000px to my #root and it looks okay now but my html width is still the same as my screen width which I think should not be like that
Maybe try this
<meta name="viewport" content="width=device-width, initial-scale=1">
You can find more info about this here:
Responsive Meta Tag
Try setting the width as 100vw, not 100% and if this won't work, set min-width to 100vw, too
I have the following markup: (simplified)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
<div class="wrapper">
<div class="content"> (absolutely positioned stuff) </div>
</div>
</body>
with the following styles:
.wrapper {
width: 100%;
height: 100%;
}
.content {
width: 640px;
height: 640px;
margin: 0 auto;
position: relative;
background-color: orange;
}
On a desktop (screens larger than 640px x 640px) my square is top and center, which looks good. On mobile portrait, my square is top and fills the width, which is also good and perfectly acceptable. On mobile landscape (screens less than 640px tall), however, my square fills the entire width and the user will need to scroll to see the bottom of the square, which is not acceptable.
What I'd like to achieve is for the square to fit the height of the screen so it can be seen in its entirety in landscape view. I'm trying some media queries out now to see if that helps. Otherwise, what would be the best way to achieve this?
I've tried changing .content to height: 100%, but because most of its contents are absolutely positioned they end up having 0px height. As such, ideally the square should still be 640px x 640px in size, just scaled to fit the screen so the contents can stay put.
Thanks.
This is the ideal case for viewport units. Where 100vw is the the width of the viewport, and 100vh is the height of the viewport.
You should be able to find some more information on the different units here.
One thing to note though, is that using height related viewport units can lead to some odd effects on Mobile Safari and Mobile Chrome, because the viewport height can change on scroll. The various behaviours of Chrome and Safari on mobile with regards to this have changed over the years as they try to figure you out an ideal solution. I find if I need to rely on vh units I often use a little bit of javascript or css to then "lock" the object at that height on mobile.
You can find other tips for that issue if you run into it in this Stack Overflow Post
I have a webpage as linked:
Click Here
Everything is fine on PC or MAC. The issue is if you look at it on a mobile devices, you will find that the 3 images caused a horizontal scroll bar.
I use this to set the viewport for mobile device consideration:
<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">
I use a sprite method to set the div background, for showing the 3 images.
HTML:
<div class="demopic" id="category"></div>
CSS:
.demopic {
text-align: center;
margin: 10px auto;
background: url(http://7te8e7.com1.z0.glb.clouddn.com/sprite_instructions.png);
}
#category {
width: 560px;
height: 590px;
}
My question is, based on my situation, is there a quick fix to achieve a responsive image? I don't want to show the horizontal scroll bar on mobile devices.
If I delete initial-scale=1.0 in <meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">, the image will be compressed for a proper size, but at the same time, the font-size will be resized as well.
Anyone give me some inspiration will be highly appreciated!
I think you're best bet is to use the standard img tag and make sure the image never expands wider than it's parent container (could just be the body element).
.my-image {
max-width:100%;
height:auto;
}
This should do the trick.
However, if you really want to use the div / background image approach things are slightly more complex.
.my-background-image {
width:100%;
height:0;
padding-bottom:50%;
background:url(img.png) no-repeat center center;
background-size:100% auto;
}
Here we set an element to fill it's parents width. Then we make it's height proportional to it's width using padding-bottom (you'll need to tweak this). Finally we make the background size always fill the element. Worth noting that background size won't work in IE8.
I have a page i've created which works fine in a desktop but get's messed up in a mobile browser.
This is the mobile version. I have a header and a .container(the one with gray background) set to width 100%. Inside .container i've a .wrapper set to width: 900px; and margin: 0 auto;. Why is the blue background and the gray background rendering till about half of the page witdh? What is the best way I can approach the problem to create a page like the desktop version on the mobile as well?
I believe your wrapper may be causing the issue. Instead of setting a fixed width for the object do:
.wrapper {
max-width:900px;
width:100%;
display:block; //for centering
margin:0 auto // for centering
}
Should solve your problem and make the website more responsive throughout different platforms.
Good luck! :)
NOTE
If you are not already doing so, take rajkumar's comment and add:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's your wrapper and li width. Set them to percentages.
.wrapper {
width: 90%;
margin: 0 auto;
}
li {
width: 30%;
....
}
if you want create a site for both desktop and mobile..Try all width in percentage.because percentage only fit width automatically according to screen resolution.suppose you give in pixels the screen was not adjustable in all screen resolutions.its only fix according to your size only.
In your case please make sure for all width in percentage.
and also please conform the media type for get screen width in header section
<meta name="viewport" content="width=device-width, initial-scale=1">
I am playing around with viewport and tried to do a width of 520, but it seems to do device-width instead. Any ideas?
<html>
<head>
<meta name="viewport" content="width=520, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
h1
{
width: 980px;
border: 1px solid red;
}
h2
{
width: 520px;
border: 1px solid green;
}
h3
{
width: 320px;
border: 1px solid green;
}
</style>
</head>
<body>
<h1>I am a big heading 980px wide. Yes I am</h1>
<h2>I am a big heading 520px wide. Yes I am</h2>
<h3>I am a big heading 320 wide. Yes I am</h3>
</body>
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum Viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the Viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
This was derived from this LINK.
So I am assuming that in your case too since you have set the html tags width to more than 520px the browser is taking the 520px width as minumum width and working upwards from there to render the larger tags.
This article seems to suggest that content="initial-scale=1, maximum-scale=1, user-scalable=no" is the issue, and that if you're trying to create a fixed viewport they should be omitted.
I haven't had a chance to test it myself, but the rationale seems sound.
Hope that helps.
It's hard to rely on the viewport meta tag for width. As this article points out:
Sometimes the formal screen.width does not make much sense because the pixel count is just too high. For instance, the Nexus One
has a formal width of 480px, but Google engineers have decided that
giving the layout viewport a width of 480px when using device-width is
just too much. They shrank it to 2/3rds, so that device-width gives
you a width of 320px, just as on the iPhone.
Those 320px are "CSS Pixels," meaning that 320 pixels is the width of the viewport, no matter how wide the device or document actually is.
If you are specifying a width larger (or smaller) than the phone's actual size and restricting scale, you will have problems. Try removing initial-scale=1, maximum-scale=1, to allow the browser to scale the page to fit the device correctly. You can still keep user-scalable=no and width=520.
Your Header tag(H1, H2, H3) width are 980px, 520px and 320px respectively.Your headers tag has hard coded width hence what ever the device width will be but your header tag width will be same and will not become responsive. I think instead of providing width in pixel why you don't use width in %. And you can also put the header tag in one container made that container position:relative even you can made relative to your individuals header tag.