I've created a modal on my app which the content is designed to fit onto the Iphone 6. However when I open the modal on the Iphone 5s, the content text is too big. Is there a way in the CSS to make the app resize the text based on the phone its on?
Currently I have in the CSS:
.firstParagraph {
float: right;
margin-left: 80px;
font-size: 12;
}
You could use:
font-size: 20vw;
To make the text 20% av the screen width no matter the device. (Modern device that is).
Related
I am very new to cordova apps and developing for phones so apologies if this is a simple fix. I have a sign in page which consists of a box for email and a box for password and then the sign in button. Below all of this right at the very bottom of the screen is a further button which links to a buy something page. This all works fine except when i view the app on an iphone 4s. In this case the link to the buy something page floats up and places itself over the password field. I have tried changing the css positioning to relative but this then messes the app up in iphone 5 and 6. I then tried to implement a z count which did sort of work but also affected other functionality. The relative bit of the css is below.
&.start-button {
bottom: 0px;
position: absolute;
width: 100%;
background-color: transparent;
left: 0px;
border-top: 1px solid #ddd;
This was resolved by amending the meta tag to include the following:
height= device-height
My site is www.familyhistoryconferencenwa.org
I have a MacBook Air, an iPhone 5 and an iPad Air so I phrase this for iOS 8.1.1 but obviously I want the solution to work for all tablets and smart phones across all platforms.
On the "Class Schedule" page of the site I have an iframe that works correctly on my MacBookAir running OS X Yosemite (10.1.1) but on my iPad Air and iPhone 5 running iOS 8.1.1 the frame width displays improperly. It extends to the right beyond the right edge of the page. If you visit the site on a a desktop or laptop then on a mobile device you should see what I mean.
My question is: what code do I use to get the iframe to display properly on mobile devices?
The relevant code is:
<div style="text-align: center">
<iframe src="url"; frame-border="1"; height="600px"; width="100%">
</iframe>
</div>
As I said, this code works correctly on the MacBook Air. The iframe occupies the width of the page. But on the iPhone and iPad the frame extends beyond the right border of the page. What am I doing wrong? (By the way, if I set the height to 100% I inexplicably get a frame about 200 px high although the source document takes 600px to view all of it.)
I've consulted two texts on HTML coding, searched other forum sites on the web and searched this site for the answer to similar questions but have had no luck. I've seen the item "Iframe on mobile devices problematic" on this site but I'm really hoping that I'm not stuck with that for an answer.
Any help will be greatly appreciated.
Thanks
Steve
The best responsive iframe code I've come up with thus far is:
// HTML:
<div class="iframe-container iframe-container-for-wxh-500x350"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="http://urlToTargetSite.com">
<p style="font-size: 110%;"><em><strong>IFRAME:</strong> There is
iframe content here but your browser version does not support
iframes.</em> Please update your browser to its current version
and try again.</p>
</iframe>
</div>
// CSS:
.iframe-container {
position: relative;
margin: 5px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 1px solid #7a8b8b;
/* put following styles (necessary for overflow and
scrolling handling) in div container around iframe
because not stable in CSS
-webkit-overflow-scrolling: touch;
overflow: auto; */
}
.iframe-container-for-wxh-500x350 {
padding: 10px 10px 70% 10px; /* padding-bottom = h/w as a % */
}
The rationale behind the code can be seen at How To Make Responsive Iframes -- It's Easy!
There are three salient points:
Set no attributes in the iframe opening tag, specifically not width and height.
Put a div container around the iframe, and use CSS height: 0; and then padding-bottom: nn%; to give the container a height equal to the height:width ratio expressed as a percentage.
Style the div inline with -webkit-overflow-scrolling: touch; and overflow: auto; which are necessary to handle scrolling and overflow on mobile devices and are unstable in CSS.
I'm on an iPhone 5... I started updating my website, to use retina images. Everything works perfectly in Safari. For some reason, my background-image for the body isn't using it, and its super blurry. Any ideas? Is this a bug? This is what I have for the media query for retina displays:
body {
background:
url(../images/logo.png) no-repeat,
url(style/images/dark/bg5.jpg) 50% 0 no-repeat,
url(style/images/dark/bg5_repeater.png) repeat bottom;
background-attachment: fixed;
background-color:#09273e;
color:#e4e4e4;
background-position: 15px 10px, top, bottom;
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
body, #header {
background: url(../images/dark/bg5_repeater#2x.png) repeat;
background-size: 70px 70px;
}
}
Here is the link to the file and code line, on my bitbucket: http://bit.ly/Sxevfg
Here are some screenshots too between Safari and Chrome on iOS 7.1.1.
Thanks so much
Could be that the image was not saved as a progressive image. When saved as progressive, it fixes the issue.
Chrome renders pages with Safari's engine (the only browser engine Apple allows on iOS), so this must be a difference between in-app Safari (UIWebView) and actual Safari.
But my answer is that you should not be implementing a retina tax. Are double-resolution images really worth doubling the user's mobile data usage, or doubling your page's load time?
(If work on the Network Information API continues, maybe we'll get media queries for bandwidth...)
I have a webpage whose width is over 1000px wide. There is a background DIV element that spans across the entire width
.bg_horizon {
position:absolute;
width:100%;
height:800px;
background-color:#f7f7f7;
border-bottom:1px solid #8d9092;
z-index:-9999;
margin:0;
padding:0;
}
This box renders fine in landscape orientation and on desktops, but on ipad portrait mode the webpage is wider than the viewport... this is fine, as the user can just pan around, we don't allow scaling... but the background div only rendered the css width:100% up to the visible portion of the viewport. When I pan around, I can see the rest of the webpage but the div did not extend into those areas. How can I get width:100% to span across the entire webpage?
iPad screen width is 1024px so try adding:
html {
min-width: 1024px;
}
I have the following HTML-page:
<html>
<head><style>
* { margin: 0; padding: 0; border: none; }
button { width: 14px; background: #F00; }
</style></head>
<body>
<button></button>
<button></button>
<button></button>
</body>
</html>
When I run this code in any desktop browser, it works perfectly; the buttons are 14 pixels wide. When I run this code in Safari on an iPad, the buttons are wider. Is there some minimum width for buttons? Can this width be overridden?
Just now encountered the same problem. I did small trial/research which showed that font-size affects horizontal paddings (both left and right).
So, to fix this - explicitly state padding: 0 or any other padding you require.
iOS 11.2, iOS 10.3.3
Answering my own question: apparently, the minimum width of <button> depends on the font size. So by setting the font size to 0, I can make the buttons smaller. I do realize that small buttons are not good when used on a touch-driven device like the iPad, so I'll probably create an alternate, more touch-friendly version of the UI.