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;
}
}
Related
I made a carousel to fill 100% height and width of browser and it does that fine on a desktop or in protriate mode on a mobile but when switched to landscape the display breaks. I made a bootply but it doesnt show the error im refering to. Maybe its caused by the form I have added?
http://www.bootply.com/BKl0fXVMrj
You can see the actual error here. Open dev tools select a iphone4,5,6 galaxy s4,5.. pretty much any current smart phone and you will see what I mean.
http://www.casouza.com/homelist
After my previous comment I looked deeper into this, try the code below in your CSS.
#bg-slide-carousel .carousel-inner {
position:fixed;
}
This makes the background carousel stay with the viewport. I've tested this in the chrome dev tools emulator with the site you posted and it appears to work fine.
I'm not an expert in css and I am building my first ever responsive WP Theme. It seems I got it working on chrome and FF (at least it looks ok on my mac), but in Safari it seems that width 100% does not work when resizing browser window (the same on iPhone and android phone). The site is http://www.designstest.co.uk/ stylesheet: http://www.designstest.co.uk/style.css
Thank you for reading. Any help will be appreciated.
Hey, as I checked your code, I found a lot of issues.
I strongly advise you to hire a designer to build your website with a responsive layout.
If you don't want to hire a designer, there are a lot of free responsive layout frameworks available for you to use.
also, you have a visible horizontal scrollbar in your website, if you wish to remove it simply add this to your CSS.
*
{
margin: 0;
padding: 0;
}
This is what I see when using FireFox on Windows 8
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.
The code : http://jsfiddle.net/YM5Cb/
Please take look at the fiddle.
I am trying out webkit models. I was experimenting with horizontal box layout.
See the top right panel, its height is more than its parent.
How to make its height same height as its parent
The above demo works only in chrome and safari. I am learning to create HTML 5 apps for android and ios device. Thats why i am using webkit. So its enough for the code to work on chrome and safari, so it will work fine in ios and android devices
maybe you can try to set the property height:auto for child boxes/divs
I've been tearing my hair out trying to figure out why my pages based on Bootstrap responsive have an extra 25-30px on the right side in Firefox and IE when the window is <600px in width. I started to remove parts of my code one by one, until I was left only with the fluid nav bar and the Facebook SDK. Once I then removed the Facebook JS SDK reference, the padding on the right side disappeared.
You can see this here:
FB JS SDK included, extra right side padding:
https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm
If you remove the FB JS SDK, it works as expected (no padding on right side):
https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm
Since I need the Facebook JS SDK for the like buttons on my page, how can I work around this?
Oddly, in Safari and Chrome this does not repro.
Screenshot from Firefox:
Screenshot from IE:
As suggested by CBroe, you could try to alter the #fb-root style, but there may some JS actions that will change it again, or it may just disable some functions.
So I would suggest to add this to your styles :
html { overflow-x: hidden; }
With this fix, you may encounter one slight problem if you have a very small window and want an horizontal scrollbar. You might try this, though the padding reappears under 200px :
#media (max-width: 200px) {
html { overflow-x: auto; }
}
Tested on FF13, and IE9 (can't resize IE9 window to less than 200px).
It’s the Facebook DIV element #fb-root that’s causing this – once you set it to display:none or position it absolutely with say left:-200px via Firebug, the extra margin disappears.
However, doing so in your stylesheet might not be a good idea, since the SDK uses this element to display it’s dialogs etc. – so either those might stop working (setting it to display:none is supposed to stop it working in older IEs completely), or the SDK might overwrite such formatting again itself.
You should thoroughly test this, if you try adding formatting of your own to it.