I have my site :
www.emantiss.com
And when Im resizing the site the main image on the top not resizing with the site it self.
Just when im doing a refresh to the page the new size get in action.
Im trying alot of things with max-width and this code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
but it doesnt work for me.
If some1 can help me. it Will be great.
If you want images to be sized according to the size of the browser window you have to use relative value, i.e. percentual values. You can use media queries in your css file to limit this behavior to windows not until a certain size.
This is one quick way of doing it provided you are using the <IMG> tag:
CSS
.container{max-width-500px;}
.container img{width:100%;}
HTML
<div class="container">
<img src="YOUR-IMG-URL" />
</div>
Related
I just create grid based on mobile first (old style, not using flex). When I try my result, the width of element when on mobile is not work, it overwrite width from min-width: 768px. Here is the image
I've tested it on other element, and it's not have problem. Check out this image
why it's have different result, I'm using same css. Please help me :)
I guess you have missed meta tag in head tag which specifically tells browser to take media queries css :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
I am building a responsive website. However, when I view it in a mobile mode, the content I have is just 50% of the screen and the rest is white space. May I know why?
Also, how can I make my background image of my home screen responsive? Sometimes it is responsive and sometimes its not.I don't know where I am going wrong.
Many Thanks in advance.
Check all the way through the white space for any div elements sticking out. There will be a div that extends the whole way across the page. Once that is altered to be the same width as the other content it will fit to the screen width.
You are probably missing the <meta name="viewport"> tag.
Read more about it here:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Try inserting this one first in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
I created this page based on bootstrap and when I test it with http://www.mobilephoneemulator.com/ the page goes into full-width mode, adjusting to the screen-size of the browser on the phone. However, when I do this on my real IPhone 6 (and also IPad), it does not seem to do this (both in Safari and Chrome) and I'm not sure why. Perhaps this behavior occurs because it automatically tabs into the Username field, thus zooming out? I attached a screenshot:
Try adding the viewport meta to the header of your page. It's quite important for mobile sites to control the zooming:
<meta name="viewport" content="width=device-width, initial-scale=1">
More information is at Mozilla's MDN: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Its because the width is set to 50% because of the class col-sm-6.
Please add col-xs-12 to the div to the make its width 100%
Please refer to Bootstrap's Documentation
Make the class on the parent div 'container-fluid'.
<div class="container-fluid">
Adjust the bootstrap classes to:
<div class="col-sm-12">
Hope this helps.
#John I think the problem Is with the zooming Here, add this <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> in the <head> tag, That should do the trick!
I would like to create a website that acts like an app. It's super simple, but I still can't figure it out how to get it to work...
It's basically an image that is going to show when you launch the app from your homescreen (I need to somehow make the address & nav bar disappear). When you click on the image, it's supposed to show the next image.
I tried with this line of code
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!-- this is the part responsible for hidding the bottom bar -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="images/template/engage.png"/>
and the images are coded like this
<a href="xxx.html">
<img src="xxxx.png"/>
</a>
But the problem is that the images are not size-adjusted to the iphone screen, they become much larger so you have to scroll to see the whole picture.
Also, whenever the image link is pressed a new safari window opens and contains the safari nav bars & address field.
Anyone know how I can make this work?
Thanks in advance..
You can set a maximum width on your image in css to avoid the image being wider then the current window:
img { max-width: 100%; }
You may want to consider using a css framework, like Bootstrap or Foundation. It may help you make a responsive/mobile-friendly website a bit more easily, especially with their grid systems, and responsive ui elements.
try in css style
img{
max-width: 100%;
}
EDIT
Sorry, I was in a hurry .)
I'm trying to make my site more "responsive" on mobile devices.
http://healthybodyguru.com
I've tried a lot of variations of the "viewport" meta tag, which is currently:
<meta name="viewport" content="width=device-width, initial-scale=1" />
But for some reason on my HTC Vivid, the page loads quite zoomed in:
Any ideas how I can adjust the viewport so the page is 100% visible on my Android?
Maybe try something like this:
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1"/>
I'm still trying to understand the viewport to be honest. But I think, I maybe got it now. The viewport width should be set to the default viewable width of the content. For example: If you just have an <img/> with width: 320px, than the image will be fullscreen if you use the code above.
initial-scale=1
Is causing it to load zoomed in. You can either remove it, or replace it with maximum-scale or minimum-scale (for whatever you're trying to achieve).
This code is working for me great ... I hope it will work for you too ...
// fit the width of screen
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// remove a weird white line on the right size
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);