I putted this tag in my code:
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
And then, after a media query I asked
header {
width: 100% !important;
}
main {
width: 100% !important;
}
But I have a serious difference when I go to the site in my iPhone.
Safari zoom in the text (main) and the header is much bigger in width.
If I take off the meta tag its too small.
I'm sorry, it was something stupid and silly, but I found the reason.
The problem was in the footer in reality: i tried to put the header, the main and the footer in display none to see...
I don't know why i didnt think before...
Sorry and thanks for your help.
You use semicolon to separate content attribute's values, where you should use comma instead, like:
<meta name="viewport" content="width=device-width, initial-scale=1">
header {
width: 100vw !important;
}
main {
width: 100vw !important;
}
It's just simple example, if it works for you, recode it, and get rid of important
Related
www.yourtechpros.co.uk/test/
If you see the content is fine on a computer but on a mobile device there is a gap to the right with no content there just a white space? i've checked over the code of the media query and all seems to be fine, can anyone assist?
Ive checked all the code over and tried to adjust all the content inside
www.yourtechpros.co.uk/test/
May I suggest adding a viewport meta tag? You will see that the entire website changes dimensions.
Add this to the head:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
More info can be found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Extra support:
Checked your page: add the following
#media screen and (max-width: 767px) {
.callbackicon {
display: none;
}
.aboutabccleaning {
width: 100%
}
}
And change:
.frame {
width: 130%;
}
too:
.frame {
width: 100%;
}
EXTRA extra support:
If you remove the margin from .aboutabccleaning the white space will go away.
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 build an html landing page, you can see it here
I used the meta viewport tag in that way:
<meta name="viewport" content="width=device-width">
When I enter to this page from the mobile, the page width that not fit to the screen,
Iphone example - http://mobiletest.me/iphone_5_emulator/#u=http://tzabar.exactive.co.il/
what I've done wrong?
As per War10ck's suggestion consider changing your viewport meta tag to something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can also make changes in your CSS to help you along. Consider changing the .content class. For example:
.content{
width: 100%;
max-width: 930px;
}
I'm not sure what your ultimate design goal is, but that should get you moving in the right direction. You could also look into something like Bootstrap http://getbootstrap.com/ to help you make sites responsive.
Firstly, follow the good advice from jmadden and change your viewport tag to something like
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then at line 54 of style.css you have:
.content {
width: 930px;
margin: 35px auto;
}
You need to remove that 930px width or override it with media queries because at narrow viewports it's preventing your page layout from collapsing.
Hope this helps
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'm making page http://www.rhemapress.pl/www_physis/index.php?id=1. As you see header background is on 100% width (orange). It's first element in <body>. Code for this is: <div id="header"></div>. And CSS for this element is:
#header {
width: 100%;
height: 174px;
background-image: url("img/top-line.jpg");
position: absolute;
z-index: 6;
margin: 0px 0px 0px 0px;
}
It's ok on Safari on Mac. When i use Safari on iPad, header isn't set correctly - it's not 100% width.
Where's the problem? Could you help me with it?
I'm betting after looking at your code that you need the meta viewport tag..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
try adding
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to your <head></head>
Thank you all for answers. I think it's not possible to do this correctly, but if I in mistake then respond this with correct answer. I moved #header background to <body> in CSS and set repeat-x. Now it's working correctly but it's does not solve the problem with 100% width of element on notebook and mobile device (ipad).