I can't seem to figure out why this site is not defaulting to display full screen on mobile devices and tablets (I'm only looking on iphone and kindle fire). It is also left aligning on the screen, rather than centering. The site is not yet responsive, so I'm not using any media queries.
http://dev.dhmsounds.com/
The homepage also shows the full image for the promotional banner when I have:
html,body{
margin:0;
padding:0;
max-width:100%;
height:100%;
background-color:#534f4b;
color:#534f4b;
z-index:-500;
border:0;
}
body{overflow-x: hidden;}
The site works fine in Firefox, Chrome and Safari web browsers (still testing in IE).
Thanks!
I found the problem if anyone is running into the same situation. I had a width:100% on my ul in my footer. That solved the issue for all the inner pages, however for the homepage, I also had to ad an overflow-x:hidden on my main promotional banner eventhough it was already applied to the body.
Related
1) I have been developing a site using flexbox CSS styling to control the site layout. I have been using the FLA Framework to write this site - same as facebook.design.
Firebug and Chrome Inspector show no issues with the layout of the code, however on mobile iOS Safari and Chrome, the images are cropping when the flexbox order is being used. (as far as I can tell).
Steps I have taken to resolve this are to add the -webkit-order: x; to the stylesheet however this has no effect.
The website can be seen here: LINK
I don't have a iOS device so unable to check this, but have you check to change the overflow property to auto for mobile devices?
#media screen and (max-width: 40em){
section.popup{
overflow:auto;
}
}
I just jumped into a project that was about 70% finished. The home page html5 video section and general layout of home page look perfect on Chrome and Firefox, but in Safari, giant random margins appear above and below the html5 video header. I realized that adding width:100%; and height:100%; are causing the added margins.
Please take a look and compare them on each browser.
I've tried adding display:block to the video container as well as changing margin to padding.
Many thanks in advance.
I took out width:100% and height:100% and added min-width:100% and it did the trick.
I've got a client's responsive site which is used for mobile purposes only. It works great on every phone except for Iphone 6. Home page loads fine but every inner page gets a weird overflow with a big border at the left side of the screen ().
Tried to add special breaking points just for Iphone 6 from this thread.
Tried to add an outer container to the main container with width:100%;.
Tried to add overflow:hidden; to the body and to the inner container.
Tried to add overflow-x: hidden;.
Nothing worked.
Tried to add position:fixed; to the body just to see of it will work. The overflow of the screen was gone but the site was of course not scroll-able.
I don't have a mac to debug this issue with developer tools and that limits my options.
On all mobile emulators, Chrome, FF, IE, the site looks o.k. On Browserstack I could see the bug but couldn't debug it there.
It's not a single phone issue, tested on several Iphone 6 devices.
Any other ideas please?
Site link.
Solved!!!
Had an issue with the some uls in the page. Added overflow:hidden; and it solve the problem.
I'm building a dynamic site with Bootstrap 3 - part of the brief is to slide in a messages box overlay from the left hand side - which ideally needs to fill 90% of the screen height.
I have added a containing div '.messageBlock' and have written a JS script to toggle the slide and deal with the messaging - the issue I have is figuring out a good way to apply a 90% height to the message block across desktops/tablet/mobile.
So far I have -
.messageBlock{height:90%; position:fixed; left:200px; width:290px; background:rgba(255,255,255,0.5);left:-300px; padding:15px; font-size:1.2em; z-index:255;}
Which seems to display as hoped across most desktop sites on the mac (Safari, FF, Chrome) with the exception of Opera (it disappears over the page fold), but also disappears over the page fold in IE9 on PC. It works in portrait mode on the iPad / iPhone but not landscape where it again disappears over the page fold.
can anyone recommend an alternative approach?
Try to not set height to anything than auto and apply bottom: 10%;.
Here is a fiddle, with altered CSS http://fiddle.jshell.net/T3LmX/2/
My website (http://amosjackson.com) uses css media queries to resize the website so that it fits an iPhone screen. When I view the site (on an iPhone 4), a block of background shows through to the right of the header. The header is width:100% and so should be from edge to edge. I haven't properly coded the css for non-retina iOS (it looks worse on older iDevices) so please don't comment on that.
The Problem is the padding: 10px; in combination with width: 100%; in the #nav element. Drop the padding an it should work.