I'm having an issue with my site displaying the contents of an iframe properly (it's a dashboard from Metabase if anyone is familiar with that).
On my large monitor the dashboard shows fine, however on my 13-in laptop some of the numbers are obscured by an arrow. This is only the case in Chrome, as Firefox doesn't have the issue.
When I take the zoom down to 90% everything shows flawlessly on the 13-in resolution, however I don't want my users to have to manually zoom out just to make the page appear properly.
I've used all kinds of zoom, transform, and scale options to get this looking right but whenever I get it working on the small resolution it just breaks on the larger one. And the CSS code doesn't seem to be the same zoom as if you do it manually through Chrome, if that makes sense. It just doesn't work the same way.
I'm not sure what to do except maybe have the screen size auto adjust for a smaller resolution to 90% but I'm not sure how to do that or if it's even possible.
Any ideas for what I can do?
You can use different CSS code for different screen resolutions using #media tags.
You could also try the CSS zoom property on the html or body tag, but some people don't recommend it.
Related
I've been asked to see if I can solve this issue. Another dev wrote the page, using a mishmash of percentages and px values for margins, padding, dimensions etc. These values are sprinkled both inline and in the css file. It was meant to be deployed on a set of tablets with a 1920x1080 resolution. However, the actual devices are running 1024x600. As you can guess, this has thrown everything out of whack. As of now, I'm guessing I'll be spending the next few hours changing the values to percentages. Is there any other way to do this?
To clarify, I don't need to make it responsive. This is a page that would only be viewed on a 1920x1080 screen but now will only be viewed on a 1024x600 screen.
This is a little dirty, but it will work:
html {
zoom:0.5;
}
your webpage will be zoomed to 50%. You can add media-queries so it only uses the zoom on specific screen widths
This is a very 'hacky' solution, but what finally worked was creating a new web page containing nothing but an iframe hardcoded with the original resolution settings (inline CSS height and width). The content of that iframe is the page that was to be resized. This entire thing was then imported into android studio and then exported as an apk. When that apk was installed and run, it worked. I'm not sure why, but it did work, so we left it at that.
On my webpage, I use images that are 720px by 480px. If I look at them in Firefox or IE (latest version) however they look scaled up, they are considerably larger on the screen than their original version in Lightroom. If I look at the dimensions of the picture on the web though, it says that it is 720x480. If I want the files to be as big as they should be, then I have to set the width-property to 600px, which I think is odd..
The webpage uses Bootstrap 3.3.4.
There may be styles being applied by Bootstrap or something else, which are causing the issue. If you look in the inspector of your browser, it will show you all of the rules that apply to a given element. Also, your browser may be zoomed. The shortcut to reset it to default is usually Ctrl-0, though there is also usually also an option listed in the menus.
I'm working on a one-page-project that uses fullpage.js to create scrollable, viewport-filling secions. It's pretty straight-forward, on each slide there is one picture and some text. On devices with bigger viewports, I want the picture to float to the left and the text to appear at it's right side. For smaller viewports, I've added a media query that makes the picture fill the viewport width (width:96vw) and removed the float property (float:none; clear:both;). When I test this in any browser on my PC by reducing the size of the browser window, it works just fine, if the window's width reaches 800px (the condition in the media query is (max-width:800px)), the text jumps below the picture and the picture enlarges to the width of the browser window. The jsfiddle I created works as intended as well:
http://jsfiddle.net/GinSan/ehco10dh/
However, I've uploaded the project to my website and opened it on my android phone, and neither the Firefox nor the Chrome app seem to recognize the media query. It applies the float instead, which looks terrible in portrait orientation ... I've tried adding some more style-rules in the media query, none of which seem to be recognized by the mobile browsers.
I've stared at my media query for like half an hour, but I can't find any mistake. Can you? Or could this be related to the fullpage.js library? Or what else might be the problem? According to caniuse.com, media queries are supported by both android apps.
I would post a link for you to check out the problem yourself, but I'm not sure if I'm allowed to. Am I?
While searching for an easy way to make my menu (http://www.ck-game.com/newIndex.html) fit screen size I stumbled over the possibility of using the browser's zoom functionalities (zoom, moz-zoom, etc.). I could imagine that it's much easier than using "em", "%" and media queries to make an elastic layout, more so because I have background-images which need to keep aspect ratio. Is there anything that speaks against using it besides someone wanting to actually zoom in/out and then the menu would adjust to it?
EDIT:
Proof of concept: http://www.ck-game.com/newIndex.html
Please try with different viewports and see how well it adapts :) Tested in IE9, latest FF and latest Chrome. Works on Android devices, breaks on most iOS devices.
I've am currently customizing a theme for an e-commerce website and it works great on all browsers. But when zoomed in (25% to 90%) or zoomed out (only at 150%) my category list on the right side of the page seems to get indented in. I this this is most likely a CSS issue and I tried fixing this on my own, but no good.
You can see it here: http://www.autumnmeadow.com/jar-candles
The code should be able to be seen on the developer tools for whichever browser you are using. There does not seem to be any issue on IE9 but it does not work correctly on Chrome or FireFox.
Try making the width and height in % and not in px. lets say if you want it to fill the half of the screen, make it 50%.
<div width="50%" height="100%"></div>
You can always use css transform: scale(...) based on what the zoom level is and scale the size up/down, therefore negating the zoom level.
Github project for detecting zoom levels, here