I need to try and move a section of text over by about 3 percent. Unfortunately, this change will not actually show up on mobile devices no matter what I do. Is the problem with my code, or is there a problem with androids in relative positioning?
<html>
<head>
<style>
posit{
position:relative;
left:25%;
max-width:500 px;
}
</style>
<title></title>
</head>
<body>
<div id="rightcol">
<p><strong>????????</strong></p>
<p>??????????</p>
<p><strong>???????????</strong></p>
<p>???????????? </p>
<p>????????????? ?????????.</p>
<p> </p>
</div>
<div id="centercol">
<h1>??????????</h1>
<p><strong>????????</strong></p>
<p>????????</p>
<p><strong>????????????</strong></p>
<p>?????????</p>
<p><strong>??????</strong></p>
<posit>
<p>??????????????</p>
</posit>
</div>
</body>
</html>
I would separate the positioning and the max-width of the posit object, maybe something like:
posit{
position : relative;
left: 25%;
}
.some-class{
max-width: 500px;
}
Related
My HTML has several inner divs with display: inline-block inside an outer div with text-align: center;. This is the expected behaviour: in a big screen, some divs will show up side by side (how many depends on the size of each inner div and the outer div) and the set will be center aligned. When the screen width gets narrower the divs will re-position, and in a small smartphone screen we'll have only one div per row, center-aligned.
This is my MCVE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Align center</title>
<style type="text/css">
body {
background-color: white;
}
div.container {
margin: auto;
max-width: 1000px;
text-align: center
}
div.block {
margin: 4px;
display: inline-block;
width: 320px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>
If you change the size of the window you'll see the divs repositioning (SO snippet is quite small to see this behaviour, but you can click "full page" and resize the window).
My problem:
In smartphones there is just 1 div per row, and this is exactly what I want. But my problem is that the div is not center aligned on iPhones, despite being perfectly aligned on Android phones.
Using the code above, this is the result in an Android phone, you can see that the white margins are the same on left and right:
But now on an iPhone:
The div is slightly positioned to the right.
What can I do to center-align the divs?
Note 1: I wrote Android and iPhone in the question's title because I'm not sure if this problem depends on the OS (Android vs iOs) or on the browser (mobile Chrome vs mobile Safari). I don't think this is a Safari problem, because the divs are OK on iPad and MacBook.
Note 2: It may not be an "alignment" problem: on iPhone, it's like the div was not "compressed" to fit the screen.
Add this in your head tags,
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Remove div.container from your css
Change block css to
.block {
width: 100%;
height: 400px;
background-color: green;
display: flex;
justify-content: center;
align-content: center;
}
if you want to show the blocks 3 at a time in 1 row in full screen:
<div class="container">
<div class="col-lg-4">
<div class="block"></div>
</div>
<div class="col-lg-4">
<div class="block"></div>
</div>
<div class="col-lg-4">
<div class="block"></div>
</div>
</div>
I want to layout one page like this: screenshot1, screenshot2.
The page includes three sections -- header (orange section), content (pink section), footer (blue section) --
The header and footer will be fixed on the screen. The content will scroll when needed.At the same time, when you focus any of the three inputs (located in the different sections), the keyboard can't cover the input, neither do the other section.
I have tried some methods, but I can't find a perfect method compatible with all the mobile browsers.
In china there is a quirk browser called UC, in version 9.0 UC when the keyboard displays, there is a blank area at the end of page. This blank area won't disapper until you touch the screen and scroll the page, like this the blank area in the end of page.
I inspected this area thrown winer, the blank area isn`t a part of the HTML, have been confused by this problem .
I need your help!
Any suggestions?
I have tried this layout:
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
{{wing.view('pages/demo/css')}}
</head>
<body>
<div id="doc">
<div class="header">this is header
<div>input some chinese chars:<input type="text"/></div>
</div>
<div class="content">this is content
<div>input some chinese chars:
数学库 - 开源中国社区
Math.js 是个JavaScript 和写真—Tag—电影网—www.M... 电影网
<input type="text"/></div>
</div>
<div class="footer">this is footer
<div>input some chinese chars:<input type="text"/></div>
</div>
</div>
</body>
</html>
css(less):
#import url(../lang/base.less);
html, body, #wing-page-content, #doc {
height: 100%;
}
#doc {
.display();
.flex-direction(column);
}
.content {
.flex();
background-color: #f99690;
}
.header {
height: 44px;
background-color: #e76000;
}
.footer {
height: 44px;
background-color: #0073FD;
}
.content {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
base.less--->https://github.com/codio/Flex.less/blob/master/flex.less
<html>
<body style="height:100%; width:100%">
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
</body>
</html>
I created a form using bootstrap, css, and html.
However when I click on the text area on an android phone(that is, when it comes into focus), the bottom half of the textarea changes color.
I don't understand why its turning white.
By the way: It works fine on a PC.
My css Code:
.container-fluid{
background-color: #EF4247;
border-color: #EF4247;
}
form {
height: 100%;
width: 100%;
padding: 50;
background-color: #EF4247;
border-color: #EF4247;
text-align: center;
margin: 0;
}
h1{
text-align:center;
}
textarea{ width:200px;
}
.form-horizontal .control-group {
margin-bottom: 20px;
}
My HTML code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>SEND ME SOME MAIL</h1>
<form class="form-horizontal" action="mail.php" method="post" >
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email" name="subject">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Text Area</label>
<div class="controls">
<textarea id="textarea" rows="10" name="message" placeholder="Enter your message here:"></textarea>
</div>
</div>
<button type="submit" class="btn">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="fitter-happier-text.js"></script>
<script type="text/javascript"></script>
</div>
</body>
</html>
I believe the underlying issue in this particular example is that the behaviour of the bootstrap container-fluid CSS style appears to be incompatible with your desired effect on mobile devices.
My answer to this is merely encapsulate your form with a new block element and set your background on that. Then set min-height:100% on this new block container, as well as the <html> and <body> elements.
Something like this:
html, body {
min-height:100%;height:100%;
}
.red-background-not-on-body-or-html {
background-color: #EF4247;
min-height:100%;
}
And html like this:
<body>
<div class="red-background-not-on-body-or-html">
<div class="container-fluid">
<!-- FORM HERE -->
</div>
</div>
</body>
As far as your example goes, you could also just put the background-color attribute on the <body> or <html> tags themselves.
Otherwise, if you still require that the background respect the .container-fluid CSS logic, then you could try a hack with media queries for handheld devices but it could get messy.
You could also try re-ordering so that the form is outside the fluid logic then add min-height:100% to the form.
JSBin to illustrate
I know this is very old post, but anyway here what you can do.
body {
position: absolute;
}
I delay the focus:
// If the form has the focus the keyboard moves the layout
setTimeout(() => this.focus(0), 1000);
Please find below my code of showing responsive image:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxx</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
img {
max-width: 100%;
height: auto;
width:100%;
}
</style>
</head>
<body>
<!--<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<img src="http://www.xxxxx.com/images/Events/xxxxx.png" alt="xxxxx" />
</td>
</tr>
</table>-->
<div>
<img src="http://www.xxxxx.com/images/Events/xxxxx.png" alt="xxxxx" />
</div>
</body>
</html>
Above code for responsive image works fine on iphone but when I open the page on android the image displays with a scrollbar on chrome. On firefox it works fine.
Update
The page works fine on firefox in responsive design view on desktop. It works fine on iphone. But it does not work as responsive as it's expected on android phone. On android phone, it shows scrollbars in browser and in email application as well.
How do I make image responsive so that it works on iphone, android, chrome, firefox and in an email as well ???
I have been fiddling with chrome, firefox and a custom browser on Android and with FF and chrome on a 24" screen on Windows 7 and they all show scrollbars.
Depending on the width and height of your image (actually its ratio: 3:2, 4:3, 16:9, 16:10 etc.) you will see scrollbars when resizing it on a screen with a different ratio than your image. I am not sure, but it may well be that the internal browser engines of FF and Chrome use the same kind of logic to handle image sizing (hense the same effect on Android's Webview and WebChromeClient views) and iOS does not.
You should ask yourself if it is worth all the trouble getting this issue worked out for you or simply accept it as it is (I'd opt for the last).
Have a look at the code below (download => Github renevanderlende/stackoverflow) It is not only an acceptable solution for your issue, but also adds some easy to understand Responsiveness to your page you can fiddle with!
The images in the code are from amazing Unsplash, a fantastic place to find high-quality public domain photos.
And if you are a beginner like me, a visit to Codrops really is a must. Great clear and free tutorials with awesome, ready to use code!!
Cheers, Rene
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>question-26464777</title>
<style>
div { background-size: cover; } /* fully cover a DIV background */
img { width: 100%; } /* Maximize IMG width (height will scale) */
/* Sample media query for responsive design, Resize your browser
to see the effect. DO check http://chrisnager.github.io/ungrid */
#media ( min-width :30em) {
.row { width: 100%; display: table; table-layout: fixed }
.col { display: table-cell }
}
</style>
</head>
<body>
<div class="row">
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/1.jpg" alt="image 1"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/2.jpg" alt="image 2"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/5.jpg" alt="image 5"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/6.jpg" alt="image 6"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/8.jpg" alt="image 8"></div>
</div>
<div class="row">
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div>
</div>
</body>
</html>
MAybe you should give a CSS code...
try it:
#media screen.... {
img {
max-width:100%;
}
}
Or you have overflowed any parent element
You have bigger the parent elements I think...
One of parent elements are bigger that phone display...check it
Try...
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow-x:hidden;
}
img, div {
max-width: 100%;
height: auto;
width:100%;
overflow-x:hidden;
}
Note: I'm using jQuery and jQuery Mobile.
I have a mobile page which seems to work okay in iOS, as far as respecting elements' positioning when zooming (or pinching). In Android, this is another story. Employing the Android SDK Emulator, all of my content is getting squeezed. I know there's a way to enforce that the content does not shift when zooming; I've seen it on desktop websites while using the Android browser. Disabling zooming is not the answer because I have an image on the page and I want the user to zoom in on said image.
To sum up:
I want to keep all content undisturbed when zooming (enlarging).
Thank you very much for any help.
Here is the full page (including css):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Mobile Page</title>
<meta name="description" content="This is a test page." />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style type="text/css">
#header {
background: blue bottom left repeat-x;
padding: 3px 5px 0 5px;
}
.BackBtn {
float:left;
}
.IndexBtn {
float:right;
}
.ui-body-c {
background-color: #EEF3F8;
}
.ui-btn {
font-size: 0.8em;
}
.ui-btn-inner {
padding: .6em 10px;
}
h2 {
background: silver bottom left repeat-x;
color:#333;
font-weight:bold;
line-height:1em;
clear:both;
}
h4 {
clear: both;
}
#Content #TableDiv TH, #Content #TableDiv TD {
border:1px solid;
border-collapse:collapse;
border-color:rgb(153,153,153);
}
#Content #TableDiv TD {
background:#FFF;
}
#Content #TableDiv TH {
padding: 5px;
background: #F0F0E0;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
img {
clear: both;
}
</style>
</head>
<body>
<div data-role="page" id="Index">
<div id="header">
<h1>Title</h1>
</div>
Back
Home
<h2>Section</h2>
<h4 id="Article1">Article1</h4>
<h4 id="Article2">Article2</h4>
<h4 id="Article3">Article3</h4>
<div id="Content">
<div id="TableDiv">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
<td>Value 4</td>
</tr>
</table>
</div>
</div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/200px-Rotating_earth_(large).gif"/>
</div>
</body>
</html>
Update
I figured out if I specify a set width on the page like this:
<div data-role="page" id="Index" style="width:320px;">
The zooming does not disturb the contents of the page.
But I want to maintain a liquid layout, or a fluid (hybrid) layout, at best. I can use JavaScript to specify the width of the div to the width of the device. Other than JavaScript, or setting a specific pixel (or em) width in CSS, is there an equivalent method using a liquid layout design?
Thank you.
I figured out if I specify a set width on the page like this:
<div data-role="page" id="Index" style="width:320px;">
The zooming does not disturb the contents of the page.
Unfortunately, if the orientation changes, then this won't be helpful, especially when zooming.
I suggest opening one of those desktop websites you are talking about and cheeking there hrml and css with some browser plugin . thats what i do all the time :)