Im working with media queries right now and when i press inspect element to look how the site works from other devices it does not show as full-screen. Only half of the image is showing, which is so frustrated.
To let you know what i mean, heres a picture
https://imgur.com/a/tBBXL
Ive been trying to change the resolution but that doesnt help. it just shows how big of a window i have.
Been trying to change the resolution of the media queries im using but thats not working either.
Im using
#media screen and (max-width: 540px) and (min-width: 220px){}
But overall it does not seem to be the problem.
Figured out it was the settings in the chrome browser that caused the problem.
It was working for IE and firefox.
Related
I am having a weird problem with #font-face and svg images specifically on the Samsung Internet Browser on a webpage I am developing. It has some pretty strange issues.
Part 1: The font-face problem.
I am using 2 font-faces. For some reason in the footer area they load perfectly fine. But in other parts of the document they don't. Example:
Image of footer area
On this image, the blockquote is displayed with the correct font, below that the Follow Us part uses the second font-face and it displays correctly too. The About Us heading uses the same font-face as the blockquote element but it doesn't display correctly. Now, the second image:
Image of header area
The problem here is that the About Us huge heading uses the same font as the Follow us text in the footer area (visible in image 1), but it's not displaying correctly.
Part 2: The SVG image problem
In the Image of header area if you focus on the upper border of the text container below About Us you can see that there's a very deformed SVG logo that says Petit Délice. If I open the image in a new tab it displays correctly, but inside the page it doesn't. I was thinking of using png substitution for browsers without svg support but from what I can see it wouldn't be of use in this case as the browser does support SVG.
Now, these two issues only occur in that specific browser and from what I've been able to check it happens in Android 4.2 and 4.4 on Samsung phones.
The site works perfectly fine on Chrome (both Android and iOS), Firefox and on Safari, but the customer has a Samsung phone and for some reason uses the s*itty browser it has by default which is causing me severe headaches.
You can check the site on this link
Is there any way to show my website exactly the same way how it works on PC, tablets or notebook? I've got full HD laptop and i'm using Chrome - everything works great. On my tablet 10" I also have full HD resolution and Chrome and my website shows like this one on notebook. When I try to to show it on my full HD Lumia 1520 it's crap. I don't use Chrome here so I can understand that some element can be broken by interpreter but it's so approximate that every element go on the others. It looks like 640x480.
Is it some way to force approximate?
If the site developed is not responsive according to the screen size it will not display the content present on it in well manner, you must use bootstrap in your website to make it responsive for all kind of screen resolutions. It may has problem in the CSS. So check the css you used.
Try to use meta tag called view-port. There are different situations and you may set up your website appearance with media queries for responsive results or manage it for being non-responsive but comfortable.
If you need second result - don't use any responsive frameworks or prevent them of using responsive techniques.
There are to much different situations so I can help only if you'll show me the code you have.
So I really hate the way chrome extension development works so I decided to make a regular webapp and use an iframe in my extension. Everything works fine, except for the dimensions of the website and the scrolling on the extension/site.
When developing the site, I knew I was going to use an iframe so I used percentages when formatting the site, for the most part I used 100% on most divs and textboxes. Anyway, the problem I am facing is that the scroll is extremely wonky on the extension for instance this is a picture of my extension with 400px height:
400x400. Everything looks fine.
and here is my extension with 800px height:
400x800. Scroll appears.
Why is the scroll appearing if I am merely making the extension longer? It doesn't make sense to me.
Any idea why this is happening?
There is a limit on the size of the popup window. I don't know the exact dimensions though.
You cannot increase the size of the document past it, scroll will appear.
Surprisingly the SideBarPanel is not the full height of the container by default. I can't figure out how to make it 100% height. This is what it looks like currently.
Notice how its a little less than half the height of the sidebar container. Other panels don't have this issue. I've tried setting the html and body of the panel to 100% through CSS, and I've tried calling
sidebar.setHeight('100%');
both before and after sidebar.setPage. Instead of doing anything, it causes nothing to be displayed (probably because it doesn't support % height from this method). I don't know how to debug the JS or CSS of devtools extensions, so I am not sure how to figure out what is breaking. I know error's can be viewed from the Chrome Devtools Extension, but no error is thrown in this case.
As a bonus question, showing me how to debug devtools extensions would be nice. (Googling impossible since you just get normal debugging guides.)
In case anyone else comes across this when googling, this looks like it's currently fixed in Chrome canary: https://bugs.chromium.org/p/chromium/issues/detail?id=438126
Guys can you help me with these? whats wrong here? Gamecenter window wont come all the way.
My app runs always on landscape. It works fine but the effin gamecenter will only show partially. I have no rotation problems and I dont care that the gamecenter loggin shows in portrait. I just want to show the leaderboard. Halp
Heres a picture of my problem:
http://i41.tinypic.com/raount.jpg