I am developing a website with HTML5 Boilerplate and when started checking it on iPhone saw that it doesn't look good at all. It looks like body gets one width (320px) and other elements get another larger than body causing the webpage look like this
screenshot from chrome https://www.dropbox.com/s/hzdd04wufckcewr/Screenshot%202014-01-20%2008.20.51.png
screenshot iOS simulator https://www.dropbox.com/s/llj4w0gp1cxsh86/Screenshot%202014-01-20%2008.21.21.png
I am using normalize.css default styles. The site has some mixed width for example one div's have a 940px width others should have 100% of viewport.
Has anyone seem this problem before? How can it be fixed? Thanks in advance
Related
I'm fairly new to the web developing/ coding area and looking to develop a website I've built. I'm encountering a few problems with my site, but the main issue I'd like to resolve in this thread is the centering of the content on mobile devices. The content looks fine on desktop but seems to shift to the left and not fill the page on mobile.
See link here: https://loudburr.github.io/louisburr/
Any help would be greatly appreciated!
Many thanks!
If you change your banner text CSS to instead of width to max-width that should work
.banner-text {max-width: 600px;}
I think your "html" code (that I saw in view source page of your site) has some fundamental errors. for example you use a "div" tag in the "head" section of your code. and in line about "50" you have some closed tag that I did not understand that where they started. I suggest that you check your codes in this website: https://validator.w3.org
My site is live at http://brand2o.com/. The site is responsive, and works fine at any size on every desktop browser I try and on my Android phone, but the problem is that on an iPad, the right side of the header gets cut off so it says "Licensing P" instead of "Licensing Portal."
I'm having trouble figuring out where the problem lies because I can't replicate it on desktop — Chrome's device mode actually shows it having too MUCH room on the right and the website not centering instead!
Any ideas?
Edit: Looking more closely, it looks like the iPad is giving each navigation item (they're flexbox children) equal width, and messing with flex-basis and flex-grow don't make any difference. I can't find anything about it but is this any kind of known bug? Again, it looks fine everywhere else, including desktop Safari.
Some of this issues are related to version of the OS and Safari also. What I do on this instances, if you connect your iPad to your MAC you will be able to inspect the HTML and CSS and figure the issue out.
Debug apple devices
Another site
Hope this help!
Regards
Figured it out: The lis were set to width: 100%; for when the navigation collapses, and I should have overwritten it in the media query for bigger screens. I added width: auto; and it's fixed!
The problem is that I have a responsive site, based on joomla framework. It works fine on all browser and all the custom components load easily but I have noticed that it has a problem on some mobile browsers (as: ASUS device, browser integrated on Facebook APP and more) to load a CSS of page, linked to mijoshop component. In fact this component work fine and loads CSS in some mobile browser but other show text and blank page.
For help and better understanding I have attached a video demo:
Video Link1
Video Link2
How can I fix? Thanks!!!
And for first thanks for support :)
The first idea came to my mind is that viewport in browser that doesn't load(or load but doesn't show, check in devtools responsive mode) css file differs from bottom value of pixels in media query. I mean than your design could be without base.css file, css rules work for example from 320px and some browsers have viewport value less than 320 px, so nothing is displayed.
I've been struggling with this problem for a few days now. Navigation bar on my page hides browser scrollbars. This happens in Chrome (both desktop and mobile) and Firefox - I didn't chceck other browsers yet but I suppose the result will be the same.
I tried like every single solution I found on Google and Stack Overflow but none of them fully worked. The navbar either kept covering the scrollbars or it wasn't clickable because it was under the rest of the page.
Can somebody browse my CSS and help me with this problem? Thanks a lot!
P.S.: I use no CSS framework. I downloaded the template from here and sligtly modified it.
Site: http://bit.ly/1g0pm65
I have been debugging this site for iPad and can't seem to get the footer and header backgrounds to span full width. It looks fine on the web but for some reason iPad show sup like the attached images (not full width), thoughts?
Looks like a common issue that might be fixed by setting a min-width on the HTML element. See https://stackoverflow.com/a/12242229/2765713
Feels like a bit of a hack though, will need thorough testing cross browser/device.