Does anybody know whats happening here? I tested on opera, dolphin and the factory android browser. (although it seems now to be working on opera)
The div doesn't change size, but the text somehow is shrunk to fit on part of a div.
Anyway to prevent this?
Just to be clear, I'm trying to achieve on the mobile browser the same look as the pc version.
As the problem seems to be with the browsers, how can I force the text to take the full width of the div? I tried setting the p tag to 100% with no success.
The div has to have that width and be aligned to the left of the page.
*Update 1: I tried the following code on a galaxy s4 (previously tried on s2) and got the same error on opera mini and dolphin.
The error can be visualized online using the opera mini simulator, you just need to host the html file somewhere.
*Update 2: I believe the problem exists because when the webpage is loaded, it is loaded at its normal size (pixels), so the paragraph only occupies a small part of the page. Then, the page zooms out so all the content fits the page, but the text does not spread, it stays in that initial small space.
On a Pc, as it should be:
I shrunk the code as much as I could:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<title></title>
</head>
<body>
<div style="width:1000px; margin-left:auto; margin-right:auto;" >
<div style="float:left; width:758px; background-color:aqua;">
<p>
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text .
<br />
<br />
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text .
<br />
<br />
Random text Random text Random text Random text
<a href="http://www.a.com/a.html">
Random text </a> Random text
Random text .
</p>
</div>
</div>
</body>
</html>
Thanks.
Better start applying HTML5, and the proper doctype:
<!DOCTYPE html>
Then tune the viewport, so it can be applied:
<meta name="viewport" content="width=device-width, initial-scale=1">
I don't have Opera Mini to test, but according to the compatibility table it should be working.
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
To your page.
Here is a good read about the viewport meta tag: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
It might be a text zoom thing in Webkit try adding the css:
{ -webkit-text-size-adjust: 100%; }
or
{ -webkit-text-size-adjust: none; }
The mobile web browser scales the page automatically so that the user can see the text more clearly. If you want to prevent the text from scaling, add this code in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
I had a problem nearly identical to this on Droid Razr (Droid OS 4.1.2) - stock browser. It turned out to be a problem with the browser itself - corrupted settings or something. Going to Settings > Advanced > Reset to Default > OK fixed the problem.
I found that when I use
text-align: center;
everything is OK, but when I use
text-align: left;
text is shrunk (Android 4.1 browser)
Need to research a bit more...
Try specifying the widths in relative units like %.
as here:
width:100%; for first div and..
width:75%; for the div inside it
Related
I am hoping to use an image of a map that is divided up by regions as a way to click on a region and it takes you to a page of locations within that region. I tried to divide the image up and making the rest transparent but the whole thing is still clickable. Does anyone know a way that I would be able to achieve this?
This is what the whole image of the map looks like
You can do this without any SVG or JavaScript just using the HTML <map> tag.
Allows you to define clickable regions in the image and associate a link to each.
Ok I left a few comments under your post but I think I can provide a quality answer to close this out.
Take your image and either move it to photoshop/gimp/etc. and convert it to an svg. This will allow you to create each path (country, county, however you want to break it down) and you can export as svg with the path names as the layer names you gave them.
You may not be a photoshop expert...Neither am I. I took your image and pasted it into VectorMagic.com and it was a little big but after a minute it had converted it to an svg for me.
Once you have your SVG it can be placed in the html with the <svg> tag.
You can then give each path a className or id so that you can target it with css. You may have to read up a tiny bit on how to target svg paths with css but its pretty easy.
You can add color change on hover, fade on click, what ever you want to add is possible.
To make sure I'm answering the question you asked. If the whole image is clickable if its an SVG, you are targeting the <svg> when you should be targeting the <path> tags that are children of the svg.
Lemme know if I can answer any questions. This is definitely something everyone doing design should at least play around with because its fun and rewarding when you get it to work the way you intend it to.
I once had a similar issue and used a js library called raphael.js which uses paths to render a dynamic svg and provide interactivity
I struggled to find any current refs to this but here is a tutorial
https://webdesignerwall.com/tutorials/interactive-world-javascript-map
https://cmsdk.com/jquery-plugins/building-an-interactive-map-with-raphael.html
sample I quickly knocked together
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building an interactive map with Raphael</title>
</head>
<body>
<div class="wrapper">
<div id="map"></div>
</div>
</body>
</html>
https://codepen.io/bar8s/pen/abEBWYx
I am beginning a landing page for a client. I have made it responsive, but when I open it up on a mobile phone, it pops up large and cuts off the page. I have to pinch the screen and zoom out in order to get the full content. How can I code it to where it is already just 100% there without having to zoom out?
Whether use CSS Media Queries or Boostrap framework which will provide you with predefined classes to add to your HTML elements in order for them to adapt on different screen sizes.
Double check that you haven't hard-coded widths for any images, divs or other elements on the page. Instead use relative sizes when you can, eg width: 50vw; . Setting max-widths is sometimes necessary as well, eg max-width:100%;
As per the earlier suggestion from Blueware, media queries will help you set styles based on the viewport or window size.
Also check that you have included a viewport meta tag in the head of your page:
<head>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
If still no joy, post some code or a URL.
Good luck!
I have in my Salesforce"Account" object a rich text field to save images. When I tried to set its size I'm not able to do that. But if I add text content within it the styling is working perfectly with my text content. Only my image is not responding to the style given for it. I have given my code below.Can anyone figure out what's wrong with the code?
<html>
<head>
<style type="text/css">
myDiv
{
border:0px;
height:50px;
width:10px;
}
</style>
</head>
<body>
<div id="myDiv">Picture {!Picture__c}</div>
</body>
</html>
Thanks
Aruna V
It's not possible to resize an image with CSS so go for alternate methods.
For an working method refer here.
I'm trying to get a 1200px page to display in a Samsung S7. Since the S7 has a 1440x2560 screen I would expect the page to display fine, but all I see is about the left quarter of it, with no ability to swipe left to see more. I tried adding a viewport meta tag:
<head>
<meta name = "viewport" content="width=device-width, initial-scale=1.0" />
but I get the same results. Does anyone know how to get this page to display correctly?
The page I'm trying to display is at https://thebarcoderegistry.com/verify/?barcode=040232534218
Thanks
Your wrapper has overflow-x: hidden; Therefore the internal content is cut off when the width of #wrapper on the mobile phone is narrower than the width of the internal content.
Take overflow-x: hidden; off or change it to visible and you will be able to scroll to see the content.
I'm trying to configure a viewport for mobile Safari. Using the viewport meta tag, I am trying to ensure that there's no zooming, and that you can't scroll the view horizontally. This is the meta tag I'm using:
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
On my iPhone when I load the page, it seems to look okay:
But I can scroll horizontally, so that it looks like this (this is as far to the right as I can go:
When I swing it into landscape view, the page renders as expected, locking the horizontal scroll position.
I'm trying to figure out how to make this page not scroll horizontally at all. Is it possible that I've got some page element pushing the content out? I wouldn't even expect that to be possible with a correct viewport set, but I'm grasping at straws here.
Is it possible that I've got some page element pushing the content out?
Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.
So, in order to avoid this from happening, set an overflow:hidden on the element that contains your content, or else, avoid elements from overflowing.
NB: other mobile browsers also support the viewport meta tag since a while, so you'll want to test in those as well.
body { overflow-x: hidden; } also works.
Late to the party here, but I just had a similar problem where I had horizontal scrolling across an iPhone 5, the site was effectively showing as double the width, with the right hand half completely empty.
In fact, I just needed to change the viewport meta tag from:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />
to:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
Adding the 'initial-scale' locked it down so that it only scrolled vertically as expected.
This will prevent any elements pushing content out:
body div {overflow: hidden ;} # media queries
Try this variant:
html, body{
overflow-x: hidden;
}