I am trying to use an inline style
The template is simple and is responsive in the browser but is not when I send it to my phone. The image runs off the page and does not scale to the viewport.
Here is the code:
In the img tag I put an inline style.
style="display:block; width:auto; height:100%:"
Where am I going wrong?
I am sending it to an android phone using gmail. Here is the ENTIRE page:
!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>Best Holiday Wishes</title> </head> <body> <!-- Begin Content --> <div style="width:100%; height:auto; margin:0 auto;"> <img src="literacy2pointzero.com/images/03.jpg"; style="display:block; width:auto; height:100%:" alt="Holiday Wishes" /> </div> <!-- End Content --> </body> </html>
Try giving these properties.
Style="Max-width:100%;width:100%\9;height: auto;"
It will make the image shrink and resize to its max size.
try this with your image
<img src="http://www.literacy2pointzero.com/images/03.jpg" style="max-width:100%; height: auto;" width="100%" height="auto" alt="Holiday Wishes" />
but the problem might be your viewport tag. Try this one:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Without more info, below is best I can do. It is based off a similar issue in Outlook. It may not work though depending on how your sending email client renders the width property of an image (e.g. Outlook removes percentages and creates a defined value regardless of what you have in the HTML).
First - use a table, it is more stable in email clients. Second by having 3 columns with a defined middle one, you are able to fake the CSS max-width style allowing it to shrink to screen size, but never go past what was defined in the TD tag. ALSO make sure to add the full URL when referencing src or href in emails.
See below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>Best Holiday Wishes</title>
</head>
<body> <!-- Begin Content --> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td width="600" align="center"><img width="100%" src="http://www.literacy2pointzero.com/images/03.jpg"; style="display:block;" alt="Holiday Wishes" /></td>
<td></td>
</tr>
</table> <!-- End Content --> </body> </html>
Related
below object tag rending html doc internally to display svg image.but getting scroll bars with that object.
<object class="borderlines" id="" type="image/svg+xml" data="https://qa-static-default.sf-cdn.com/renderer/imagerenderer/svgconversion?svgPath=http://swiftbuckets.sf-cdn.com/v1/cmg/qacell10/cdm/20c42364439845648af86bfb317e5481/4&imageHeight=200&imageFormat=JPG&publishedTime=1549521045 "
style="width: 100px;height: 100px;display: inline-block;position: relative"></object>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<title>svgconversion (271×200)</title>
</head>
<body style="margin: 0px;">
<img style="-webkit-user-select: none;" src="https://qa-static-default.sf-cdn.com/renderer/imagerenderer/svgconversion?svgPath=http://swiftbuckets.sf-cdn.com/v1/cmg/qacell10/cdm/20c42364439845648af86bfb317e5481/4&imageHeight=200&imageFormat=JPG&publishedTime=1549521045">
</body>
</html>
i cant comment, but maybe this can help you https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image_mediaq2
I'm trying to use media queries to change background image and hide content in a division tag if the screen goes beyond 640px. This doesn't seem to work. I'm new to this and feel I'm missing something major.
<html>
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
</style>
</HEAD>
<body>
#media screen and (min-width:641px) {
body {background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;}
}
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg" width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg" width=100% height=auto>
</div>
</body>
</html>
The CSS isn't working because its not contained with-in style tags.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
#media (min-width:641px) {
body {
background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;
}
}
</style>
</head>
<body>
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg" width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg" width=100% height=auto>
</div>
</body>
</html>
For one, you're missing a <style> tag around your media query there. Also, I'd recommend against using inline styles (i.e. style="" attribute tags in your HTML). Keep all your CSS in one place, preferably a separate CSS file you can link to in your head tag.
Also, make sure you keep your media queries declared after your other CSS for those selectors. Whatever comes last will take precedent!
I am trying to show a map in my website using Openlayers. I use the same code as here:
http://openlayers.org/dev/examples/all-overlays-google.html
Except, I want to bring it in a table, so that on the left hand side I can put some information about the map! The problem is that if I define the div tag for map in a td tag, when running the map does not show! I pulled it out from td tag and kept it in tr tag and it shows fine! My code is here:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="OpenLayers.js"></script>
<script src="all-overlays-google.js"></script>
</head>
<body onload="init()">
<table style="width: 100%;">
<tr>
<td style="width: 20%;">
Some text here
</td>
<td style="width: 80%;">
<div style="width:100%; height:60%" id="map">
</div>
</td>
</tr>
</table>
</body>
</html>
Any help would be highly appreciated.
Some points:
<center> is deprecated. Use CSS text-align: center.
Tables should only be used to display tabular data. Since in your case you don't have tabular data. don't use tables. Instead, use something like
<div id="colum-wrapper">
<div id="left-column">Left</div>
div id="right-column">Right</div>
</div>
#left-column{ float: left; width: /*whatever*/; }
#right-column{ overflow: hidden; }
Demo
Separation of behavior from markup: avoid adding event handlers using html attributes if possible.
I have coded a html page as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body bgcolor="#f2f2f2">
<div style="width:1000px;height:auto;margin:0px auto;" ><!-- main container -->
<div style="width:1000px;height:50px;margin:0px auto; background-color:pink;" ><!-- container 2 -->
Hello world
</div> <!-- end container 2 -->
</div> <!-- end main container -->
</body>
</html>
The width of the div is 1000px and it is center aligned using the property margin:0px auto;
When I view this in the desktop browser, it is fine. But in a mobile browser(iPhone Safari), I get an unwanted horizontal scroll, also the entire page floats hrizontally and diagonally.
Why does this happen?
How can I fix this issue which is specific to iPhone/iPad browser. I have not tested in other mobiles.
What are the code I need to put in to make a mobile browser display a webpage(designed for desktop browser) properly?
Please suggest.
Thanks
Thank you for the suggestions provided.
A slight modification solved the issue.
<meta name="viewport" content="width=1000" />
This worked.
Try to add this line to head section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=1000, initial-scale=1" />
Try the above, instead. The content width is set to match that of the container div, and the max scale is removed to allow users to zoom in.
I've been trying to make an image resize as you resize the window of the browser. It works in all but Internet explorer. I was requested to do this without external sheets.
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; margin:0; padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tidsaxel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="dstyle.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 100%; margin:0;">
<table cellpadding="10" height="100%" width="100%" style="margin:0;">
<tr>
<td rowspan="20" height="100%" style="margin:0;">
<img src="pil.png" height="100%" width="48" />
</td>
<td class="Rubrik">Tidsaxel för krav, program, granskning och beslut</td>
</tr>
<tr>
<td>Sverige satsar på utveckling av kärnkraft (1945). Kärnavfallet betraktas inte som något problem.</td>
</tr>
And then it goes on with 20 more rows, I don't think it's nessessary to print them all.
</body>
</html>
The picture doesn't even take up 100% of the height to begin with, and when I resize the window it just gets smaller. Is there a way to fix this? I've read that it's possible with javascript, but I haven't found a solution. It's IE 7 and IE 8 that I've tried on.
In the table, set cellpadding="0" cellspacing="0". But this affects the content area as well. You might want to look into designing your site with DIVs instead.
You might want to look into a CSS solution:
<style type="text/css">
body {
background-image:url(background.png);
background-repeat:repeat-y;
}
</style>