Hello guys i have made a website by the help of Dreamweaver in HTML, CSS and JavaScript now my screen is 15.4 inch whenever i m opening in small screens so it give me an scroll bar to see whole of my website in the width form.
i have used PX with divs that i created my whole website instead of percentage but i don't know why i m facing this problem.
.wrapper
{
width:1320px;
height:760px;
border:solid 1px #000;
margin:0 auto;
background:url(images/Background_Image.jpg) no-repeat;
}
.wrapper .logo
{
background:url(images/logo.png) no-repeat;
width:395px;
height:180px;
margin-left:323px;
margin-top:10px;
float:left;
// same method for other divs
}
Add this meta tag to your head
viewport - most important and most useful of all the meta tags. width controls the width of viewport of device, initial-scale loads the initial zoom level when page loads
<meta name="viewport" content="width=device-width, initial-scale=1">
Check Mozilla Docs - Viewport
make use of media queries
#media screen and (min-width: 700px) and (orientation: landscape) { ... }
Mozilla Docs - Media queries
Percentage/em is good if you want your site to be responsive
Related
I have a website which must be responsive for mobile phones. I've created it using my desktop.
When I adjust browser windows it's working perfectly but when I check it on my mobile phone(Microsoft-640), it seems not responsive to the mobile view.
PLease you can add meta tag viewport for responsive as under:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will be helpful to make your website as mobile view by your own.
The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things.
For example:
Width and height (of the browser window)
device width and height
orientation – for example is a phone in landscape or portrait mode?
resolution
Linking a separate stylesheet using media queries
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices
we can use the following syntax:
#media only screen and (max-device-width: 480px) {
}
Example code:
#media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}
For some more reference: 1 click me please, 2 click me too
I am using the meta viewport to make Web pages adapt to mobile devices with the usual tags like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
However many of my site users have large screens. The used viewport width is 1025px, so with larger screens, say width larger than 1920px, the users would prefer to make better use of the left and right space outside the main contain that is always empty.
Is there way to make the zoom scale of the page adapt to the viewport width when it is higher than 1025px?
I suspect that some combination of meta viewport tag attributes and some media queries it may be possible but I could not find anything to make it responsive to large screens, only to smaller screens.
You just need to add another media-query to handle high resolutions
Demo for >1280px
#media only screen and (min-width : 1280px) {
#Container {
width: 95%;
}
#PageContent {
margin: 0px auto;
max-width: 100%
}
#PageInfo {
max-width: 100%;
}
.InfoContent{
max-width: 100%;
}
.c640{
width:20%;
}
.c640 .box{
width:100%;
}
#navigation{
width:auto;
}
.box{
float:none;
}
}
It's not perfect but you can use this break-point add add more style and fix whatever doesn't look good on higher resolutions.
I'm trying to accomodate a really really old website to mobile standards and for some reason it doesn't get a width of 320 or whatever pixel width when i activate the responsive view in chrome dev tools. The result of this makes the pixels small while still maintaining the original 900 px width (in the original pc version that's the fixed size according to which the site was built on)
This would be my media query CSS:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body * {
width: auto;
}
#container,
#header,
#nav,
#container #wrapper,
#content,
#sidebar,
#wrapper-bottom,
#footer,
#footer-inner,
#footer-content
{
width: auto;
height: auto;
float: none;
}
/* Header
-------------------------------------------------------------------*/
#header h1{
display: block;
text-align: center;
}
#header #search{
position: static;
display: block;
}
/* Navigation
-------------------------------------------------------------------*/
#nav ul{
position: static;
}
}
If you need more are viewing into the mobile device and media query is not working then please check the meta tag in head
<meta name="viewport" content="width=device-width, initial-scale=1">
You must use meta viewport along with your CSS. Something like this by instance :
<meta name="viewport" content="width=device-width, initial-scale=1">
If you're viewing on your PC remove the word device from min-device-width and max-device-width.
In addition, make sure to use the meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's likely that some element on the page has a fixed width that doesn't allow for the page to resize as desired. You need to go through the elements and find it. I've ran across this issue on several sites.
I have a (rather simple) website that I wish to automatically scale and adjust such that the main content area fits in the screen without horizontal scrolling on iPad. On Landscape mode it works fine, however on portrait mode it leaves out part of it on the side, and the user has to scroll horizontally.
It normally works fine for other websites I did, but for this one I can't understand what is stopping Safari from doing this.
I added the following line at the top of the HTML but it doesn't seem to have any effect (I tried various alternatives like adding the initial-scale=1.0 etc. too)
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
What could be the reason this is not working?
Clarification
I am not looking for a media query solution. I am just trying to understand why for some sites the iPad (and other touch devices) automatically scale down a website to fit on screen, while in this case something is causing it not to. I am just trying to identify the reason for it.
there is fixed width given for inner container
div#branding{
width: 1024px;
}
#content{
width: 1024px;
}
div#footer{
width: 1024px;
}
change all the 3 width to 100% for #media screen
more information on #media screens can be found here
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
div#branding {
width: 100%;
}
#content {
width: 100%;
}
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
}
and it will work
the right side footer content will come down as the left side content is more
screenshot
note : your footer will broke as fixed height is given you can remove it
for fixing your footer change css for footer
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
screenshot
I used width:100% and it solves my orientation layout situations, but there seems to be media queries that can help too:
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
Check this site out for more: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Let us know if it works out.
Depending on rules you got in your CSS you will need to assign portrait mode such as landscape or portrait and add desired width also.
#media screen and (orientation:landscape) and (max-width:1024px){
some rules that will be applied to iPad in landscape mode
}
And big big difference is this, which will be applied on all 1024px screens
#media screen and (max-width: 1024px){
some css rules for "normal" screens on max-width: 1024px
}
EDIT:
So make sure that you put your "container" divs on 100% in various modes and adjust all other elements. the scrollbar you got is actually DOM element with fixed div or margins and paddings that affect width of whole page
I think the meta tag has a minimum scale besides the maximum:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
What I don't know is if it will make any difference at this point.
It should work in theory, along with:
#media only screen and (min-width: 480px) {
/* landscape */
}
#media only screen and (max-width: 479px) {
/* portrait */
}
I finally figured out the problem. iPad (and most touch devices) actually scale the website automatically, without the need of the <meta name="viewport" ... > if the website is not explicitly designed to be responsive.
However, this scaling does not seem to work when the website is too wide. My content was 1024px wide, which for some reason was triggering the devices to turn off scaling.
I changed the content's width to 960px (I don't know the actual threshold, but my other site that scales well had this width) and the issue was immediately fixed.
Adding this answer in case someone is looking for a reason why scaling is not working on his site.
Obviously this is not related to having a responsive site, this is just when the website is simple and scaling is enough.
What I'm noticing is that Safari by default scales the web page automatically. However if the user manually applies some scaling - Safari stops its automatic scaling.
In my case this was the reason why it scaled some sites and others don't.
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)