My personnal website is all messed up when i display it on Android devices.
I've tested my site on all major browsers on Windows and Mac OS X:
- IE7 to IE10
- Chrome
- FireFox
- Opera
- Safari
And they all display my website correctly.
I've also tested on some Apple devices and they also display correctly.
But I've tried on a Nexus 4 and a Nexus 7 and the layout is all messed up.
The page is all zoomed out and the menu seems to be outside the viewport.
I'm lost here and any help would be appreciated.
http://www.narcissusphoto.com/
You need to add media queries in your css to look your website for mobile devices. Please refer the below link and accordingly you need to make changes in css.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Try removing the fixed background on the body element.
Related
I created a web application dashboard which looks totally fine on the browser on the pc. Now what I would like to do is show this application 24/7 on a Sony Android tv with model number (BRAVIA 2017, android v. 7.0 kernel version 3.10.79).
Chrome natively isn't supported so I tried installing it using an APK. The thing is it the application doesn't look good due to the fact that this browser has a window width of about a 1000px and a height of 417 pixels. I tried downscaling in Chrome settings on the tv but it doesnt work.
Does anyone have any suggestions on what I could try or what other browsers are supported with a nice viewport width and height?
The native build in browser does not support css-grid
EDIT:
The default browser is called Vewd
It's a fact that some browsers ignore CSS they don't understand. If a browser which does not support CSS Grid comes across something it doesn't know, it throws that line away and continues.
Maybe you can use some old CSS like float,
or something to provide a grid type of layout, like
display: table-cell :)
I am trying to use Remote Debugging Android Devices on chrome. But I can not resize my mobile screen fit to 100% or any on Chrome(PC).
On mobile it looks like
But on Chrome (PC) it looks like
Now the problem is : I can not either resize mobile screen on Chrome (PC) nor scroll to bottom (I can only scroll only if I can on mobile)
I tried by zoom in/out but it's not working. But I can see the remaining part by resizing window but I can not see on full size window.
I am using Chrome Version 50.0.2661.102 m on Windows 10 Pro(64bit), Android 5.1 on Moto G (1st Gen)
UPDATE : Now I have updated chrome to Version 51.0.2704.84 m But still same problem
Press ctrl++ several times it will resize automatically, I found this solution by chance:)
Looks like you found a bug. Please file an issue on the Chromium Issue Tracker so the team can triage the problem and address it.
I had the same problem debugging Ionic with Crosswalk, but I was able to resolve the issue by pressing Ctrl and scrolling down.
Unfortunately, this changes the size of the text—but at least you can see all of the mobile screen.
I will try to answer it in best possible way.
When you resize the Chrome in Desktop Screen, try to resize the screen from divider screen between remote device and elements sections. Also use the resize from top of the Chrome as well if needed.
You will find scrolling issue in Google website landing screen (as in your case).
Try another website and check.
Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. Try using Chrome Canary (Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.
See here for technical issue. Android Remote Debugging Troubleshooting
Below are my observations for two tabs:
I have opened two different tabs in Chrome in my Android device.
Now in left side has active Google opened in tab 1 and in right side inactive StackOverFlow is there in tab 2.
In below screen, left side has inactive Google opened in tab 1 and in right side StackOverFlow is there in tab 2.
After scrolling StackOverFlow screen
Individually screens look like below :
Please let me know if any issue is there. I am using Android 5.1 on Moto E
I am testing this website on iPad and have discovered that it displays differently on Chrome for iPad than it does on Nexus 7 Chrome.
Screenshot of Chrome for iPad:
Screenshot of Chrome for Android:
does anyone know why this happens only on the ipad? I had also confirmed this same behavior for iphone so am assuming this an idevice issue.
Needed to add -webkit-justify-content to the css.
Here's the site that I'm working on:
http://www.montevista.dreamhosters.com/
You'll need Opera Mobile Emulator or an Android device (not all of them show this problem). The Samsung Galaxy III shows it as well I think.
Here's an un-minified version of the stylesheet:
http://www.montevista.dreamhosters.com/wp-content/themes/Monte-Vista/style-unminified.css
I'm pretty sure that this isn't a problem with the responsive-nav.js, but something to do with my own code. I'm using Skeleton grid.
Is there any testing tool that would allow me to view source on this? I've tried connecting Opera dragonfly but it ends up showing me what is being displayed in the browsers instead of what's in the emulator.
Me again, replying to my own question. I fixed it by switching to Slick Nav (http://slicknav.com/) instead of Responsive Nav.
Works fine in Chrome & Firefox ( both PC and Mac ).
basically it's a slidetoggle and that works, but based one the display:block of the elements it is basically transparent in the browsers cited above [meaning you can click and it will take you to it's linked tag].
The site has one breaking point at > 1230px, then it basically gets responsively smaller until you hit < 700px where the navigation will change.
Please help if you can and have experience working with browser sited above
Look at the code here: http://www.testing.sixstarproductions.com
Ok I got it. I have a fixed header with a fixed nav inside it, what I need to do was make overflow:visible on the header element.
It worked on Chrome and Firefox beforehand but not Safari or mobile browsers, so in case anyone came to this issue now you have an answer.
Thanks for looking