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.
Related
I've been searching in other questions since this is a pretty common problem but none of them applied to my case.
I'm developing a small web app with React, just to get the basics, and the background img works fine in mobile view (there's a media query that changes it at 480px to a portrait one) it resizes from 480px to 320 and looks good.
The problem is that, at certain heights if you stretch or wide the window the background gets stucked in the middle of it (if you recharge the page it appears as it should, being the window in the same exact place as where the problem occurs).
The img is loaded through CSS in the html, If I remove the background-size property it works as expected in desktop and mobile, but when I cross the 1260px width it doesnt cover the full width.
I have this codesandbox with all my code: https://codesandbox.io/s/stoic-brahmagupta-ro2kb?file=/src/style.css
And I attach an image of the problem. Thanks in advance.
As u r testing this you can see the content of the App is overflowing the html element
I rather use min-height on global elements like body or html than static height to prevent such as cases.
So to fix it you just simply add
html {
height: auto;
min-height: 100vh;
To prevent not overflowing instead of scaling we just add min-height equaly of 100vh (viewport height).
I think it will propably do the job without height: auto; but i like add it to prevent even more edge casing
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
On some mobile devices such as iPhone 5C my tables on my web page are half way off the page. How can I change that so my page width will not get any smaller than the minimum width of my table with CSS.
I have tried shaving as much space as possible but I can't seem to make my tables any smaller for mobile.
(mobile site [go to bottom of the page and select mobile version]) http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
Tables in question are in the tabs. Try resizing the page width in your browser as small as possible and you will see the problem.
As you can see in the image page is able to resize past tables minimum width.
This prevents the table content from bursting beyond the confines of its parent container, as in your screenshot.
#upgrades-datatable_wrapper {
width: 100%;
overflow: auto;
}
Screen sized to about 300 pixels
I made an example here:
http://secure-wildwood-74891.herokuapp.com/
That page has two iframes. The content in both of them, if opened in their own tab, in a window 414px wide (iphone 6s) will respect that width and render a responsive view.
That isn't happening in the first frame. The content is rendering as if the browser is significantly wider than what the iframe is set to (400px wide).
The iframes both have scrollable="no" set already.
So, how do I make the content of the top one properly respect it's parent window size?
The site which can be viewed here contains all div elements inside a wrapper div with the following propreties:
#content_wrapper{
min-height: 100%;
position: relative;
min-width: 1280px;
}
The inner content (for example DESPRE NOI section) has a static width of 960px (#despre_noi has class .latime_960)
.latime_960 {
width: 960px;
}
Even though the main wrapper has min-width:1280px and the inner content has a static, 960px width, the site fits perfectly on mobile. I tested it on a Samsung S3 and on a very old LG, in both portrait and landscape modes.
It fits perfectly. Why? Is it just by accident or I can keep this design and it will fit fine on all mobile devices?
The website does not use the Viewport Meta Tag and therefor the mobile browser is scaling the content to fit the screen.
Edit: I recommend using the Viewport Meta Tag and placing your mobile layout styles at the top of your CSS declarations followed by media queries for the CSS needed for your large screens/devices. Browser scaling may look fine at first but it is very likely you will experience font legibility or touch target interface issues when you rely on the browser scaling.
Your website doesn't load for some reason. Are you using 000webhost?
& to what you asked in the Q... its most likely because of position: relative;
edit: " .... programmed to view thew website as a whole if it is not programmed by the developed to be mobile friendly. If you add a media query to make it so that a size of a div changes based on a height and width of the screen, then you will see the change ..."