Had spent many hours try to figuring out what makes content wrapper not working.
The site is here:
http://bit.ly/19dWUf
html structure contains header, content and footer.
Its looks good when accessing using firefox, google chrome in dekstop by resizing the window to emulate mobile view.
The problem
When accessing using mobile devices the content section is right aligned, header n footer looks fine.
since it looks good on firefox and usually use firebug to debug,
it's hard to find what makes problem in real mobile device.
i m using Opera Mobile emulator to check the display..
any opinion appreciated. or is there any firebug/similar tools for testing mobile?
Thank you
Your section#content-wrapper gets margin-left and margin-right of 30px upon page load.
Either remove
jQuery('#content-wrapper').css({
'margin-left':'30px',
'margin-right':'30px'
});
from jquery.custom.js (line 332), or change it to
'margin': '0 auto'
Related
I am just a writer, no knowledge of web programming. If you look at my page here: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html it looks normal.
But if you look at the screenshot from my phone (attached), it does not. What is the issue, how can I fix it? The same problem shows up on both iPhone and Android.
I know in the past it worked, but then I did some changes per How to reduce left margin on blogger that I think messed up the mobile view. I tried to undo them, but I was poking around a lot and I don't know what I changed exactly
Screenshot from iPhone:
(there's not even scrollbar at the bottom to move left-right, just this fixed partial view)
I tried to google if it's possible to customize the mobile version, but the results said for these modern themes it should work automatically. But the mobile version is not good, what can I do?
I'm at the very start of creating a clients website, however i've already hit a stumbling block; i am trying to add a ribbon type look to the navigation in Wordpress, however whenever i add a padding or margin to the navigation (namely .menu ul), on iOS devices like the iPhone and iPad, the right side of the ribbon extends across the screen further than it should.
Any idea as to what is causing this?
Site in question: http://site.n8geeks.com
Edit: I changed the width of the .menu ul - It appears when i add a pixel value, it is interpreted differently in iOS browsers, however when i add a percentage value it seems fine on iOS. Any ideas why this is?
Edit2: Now the issue is that the top part of the ribbon doesn't show on the right hand side on iOS devices (the bit that 'bends behind' the page). Any help?
Thanks.
For those who may have a similar issue to me in the future, the problem was that Safari was taking the parent wrapper and resizing it to fit the screen. Fixing this involved adding a new wrapper that was bigger than the #page wrapper.
I have a very simple website that creates a horizontal scrollbar in the following:
Android:
Chrome
Firefox
Opera Mini
Not in Android Default browser but the site looks broken
iOS:
Safari
It's really no big deal but I'm comparing my website to the full desktop site of http://google.com and Google's website doesn't get the same problem as mine.
I am still pretty new at CSS and HTML and I feel like I'm breaking some really simple rule I don't know about that is creating this problem. Any ideas on how to fix this?
If you would like to test it. Go to http://natio.in
The horizontal scroll bar is appearing because you have fixed width's set on elements, that when the site is viewed on a mobile browser, the width of those elements is set wider than that of the viewport width. If you use a percent for widths, your webpage will be able to adjust accordingly.
well, you can include overflow-x: hidden; in the styles for your body tag, but if there is content outside the width of the phone, you wont be able to get to it. Or you could crate a responsive layout with media queries.
I have a "simple" web application that has a navigation and a content area.
Within the content area I have a iframe with more complex content. Unfortunately the content in the iframe has another iframe.
The get an overview look here:
.
In my scenario it is quite helpful to see the full iframe content, so we hide the navigation and change the content size on top of it:
If I go back now to initial view the iframe inside the iframe doesn't change the size:
This happend only on Safari mobile (iPad) OS 5.1. On normal Safari browser it works as expected.
Does anyone have a similar problem or an idea what is happening here?
Of course a solution would be even better :)
If this is an issue that only occurs in Safari or iPad you could add some cross-browser CSS support to tell the specific browser how it should appear. I like using this one
This allows you to add specific css instructions such as
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
.iphone.safari .scrollingframe {css style}
Hope this helps.
We have developed a small control that is always meant to be at the bottom of the screen on out site. However when I view the site on the ipad the control does not stick to the bottom it floats in the middle.
Whats the deal with fixed position on the ipad? Is it not possible?
Does the ipad use safari mobile?
I think you should read this.
Since iOS 5.0, position:fixed is also implemented on the iPad: http://caniuse.com/css-fixed, though there are other problems, see Disable scrolling when changing focus form elements ipad web app .
Fixed header/footers for mobile devices are tricky. Using fixed positioning doesn't work as explained in the article posted to this thread by Knu.
I've found two solutions that should provide some relief. One is with jquery mobile and the other is iScroll. Both allow for fixed footer/headers.
My problem is that I'm having a hard time combing the fixed scrolling with other effects in the iPad. I hope this helps.