I have an iframe that is responsive, but sized differently on smaller (mobile) screens. On larger screens it's the common responsive iframe where it scales proportionally to fit within the container using the padding-top %. And on smaller screens the container becomes 80vh height, 100% width. The iframe content then has it's own horizontal slider (which will also eventually be gryo controlled).
It all works fine on desktop browser, and other devices (bunch of Androids) but not on iOS. The iframe still fills the height correctly but doesn't max out at the container width. Instead it keeps original proportions and becomes wider than its container.
Not the easiest to explain in words, so:
Screenshot on Android device
Screenshot on iPhone
Live demo
View it on desktop and resize the window it actually does exactly what I need, including once you get down to smaller mobile size. Or load it on an Android device (I'm using BrowserStack). You'll notice the iframe width stops at the container bounds, and you get the scroller within the iframe.
But on iOS (iPhone) it's not doing that. Instead the iframe just extends out beyond the container bounds, and the parent page becomes horizontal scroll.
Any help appreciated.
UPDATE:
Found a semi-related post that suggests adding the following CSS for the iframe element
width: 1px; min-width: 100%; *width: 100%;
It didn't do the trick for me, however when I add that to the body element of the iframed content (which I also control), it resolves the issue.
I've been trying to fix the width of a mobile view. The below linked page displays correctly on most devices (more than 400px wide), but has a margin on the right side of the header on devices with less than 400px horizontal, like the Iphone 6, Iphone 5 and Galaxy S5. The html element says to be the same width as the screen, but when hovering over it, the visual indicator displays otherwise.
I've tried hiding elements to see which element is the problem, but I have not been succesful in finding the problem. I'm hoping one of you might have some insight in the problem at hand.
Screenshot of the problem:
In this screenshot the header is not full width, while the content is. So the problem seems to be in the header somewhere.
The page is https://www.matrastopper.eu/bestellen/.
I'm assuming some part of the page is scaling problematic on small screens, but I can't find which.
change this width
.no-columns .box.right {
background-image: url("/media/layout/box-right.gif");
width: 380px;/* change this width */
}
this css
https://www.matrastopper.eu/css/screen201410.css?
line no 836
this is my first post here. I am beginning my journey with css and html. I'm struggling with putting two responsive images next two each other that would act as buttons. What I am trying to get at is that all content is displayed on single page (without scrolling) and that the no matter the size of the screen it is always filled. Then with portrait mode on mobile screens it would display after each other.
This is how far I got already: http://test.fulfeal.co.uk/shop-intro/
I can't figure out whether it is to do with image size (the actual image is going to be a picture) or maybe with corresponding div sizes.
Thank you in advance for any help!
In order for the images to take up the full page height, first make sure that you have the following:
html, body {
height: 100%;
}
This will make sure your content can actually take up the full height of the page. Then, your images should also have their height set to 100%.
For the images to show up on top of each other for mobile, you'll need to use css media queries and then set the images to display: block; width: 100%.
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
What is the best approach for defining page width of a web app? Most of our users have 19" monitors, but many run the apps from 14" laptops, and some have 24" monitors (assume it's a max resolution). From what I know, the two most common methods are: using fixed width pages or dynamic (max) width (100%).
There are problems with either approach. If a page is fixed width optimized for a 14" laptop, then there will be a lot of wasted space on larger monitors (e.g. even though over 30% of the screen is blank on the sides, the user will have to scroll down to get the content). I used to be a proponent of dynamic width until I started seeing pages, which looked great on 14" and 19" screens displayed, on 24" monitors (the major issue is with right-aligned items, such as buttons, which become separated from the main content).
Ideally, I would want the page width to be dynamic (100%) until it reaches certain threshold (say, 600px). Is this possible? Is there a better alternative?
UPDATE: Just to clarify: I want the content of the page to be at 100% width, but within certain range, say 400px and 900px (so the user will see a horizontal scroll bar after resizing window to 300px width, and there will be white space on the sides if the window is resized to 1000px width, but between 400px and 900px, the content would auto adjust). Possible?
One way to set a maximum width for a div or table is to use CSS Expressions
div#myDiv
{
max-width: 980px;
min-width: 980px;
width: 980px;
width: expression(Math.max(Math.min((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth) - 20, 1000), 980)+'px');
}
You can replace 980 with 600 in your case. I will often create a container div to hold say the header, and footer such that they will expand the entire width of the screen, while using a child div to contain the content. In this way you can constrain the content (using the above expression), while allowing it to expand / contract based on screen size up to the max-width you specify.
******* UPDATE *********
Based on your clarifications on the comments, this example code should do what you want, if I understand you correctly. Page Header, Footer, Etc are auto sized to fit the screen, while the content is constrained to a max width of 600px wide, scaling smaller as neccesary.
<html>
<head>
<style>
div#contentDiv
{
max-width: 600px;
width:expression(document.body.clientWidth > 600? "600px": "auto" );
border: red 1px solid;
}
div#wrapper {width: auto; border: blue 1px solid;}
</style>
</head>
<body>
<div id="wrapper">
<div id="contentDiv" style="height:686px; border: solid 1px red;"></div>
</div>
</body>
</html>
Design for your audience, if 80% of your users are using a large resolution then optimise for that. Google Analytics will give you accurate stats on visitor browser resolutions.
Fixed width at about 720px wide.
I used to be a variable-width guy, but I eventually realised:
People with smaller screens (phones only, for this size) are used to zooming out and scrolling around.
People with large screens don't have their browser windows maximised anyway, because with variable-width, the text becomes so wide that it's hard to read.
(There is research into this - your eyes have a harder time figuring out which line you are up to when the first word is a foot to the left of the last word of the previous line).
Web pages may be different to web applications though; if the screen is mostly tables, buttons, graphs, reports etc, you may want a maximised liquid width to fit as much as you can.
Ideally, I would want the page width to be dynamic (100%) until it reaches certain threshold (say, 600px).
For that, I'd probably do a dynamic layout, then have some div inside it (an invisible one in the header or something will do) that's fixed to 600px. The layout will expand and contract but stop when it shrinks to the size of the div:
page
______________....
| :
|[600px div] :
| :
| c o n t e n t :
|_____________...:
My statistics says 1024x768 is on the top. That's why I'm using 960px width for my apps.
When statistics change then I change this value to other.
For mobile users You should use different views, optimized for special cases.