I am redesigning a website to better work with mobile devices. My problem is that on the right side of the page there is an open space, even though all the specified widths are the same. Here is the page: http://uniqueantiqueskingsport.com/wp7. So far I have only tested it with the Windows Phone 7 emulator.
I don't have a WP7 to test this on, but I'm seeing the same when viewing on desktop browsers. The problem is your footer content, a lot of it is set at width: 320px, margin: x and padding: x. Those margins are adding to the box model of your content, and forcing the page to expand.
Read up on the box model at Sitepoint's awesome reference site.
For the record, IE9 on Mango automatically zooms to fit the width of your content. But using a dynamic width would be much better.
Related
I was testing a scrolling element and found some strange differences between mobile (iOS) and desktop browsers. If you load this test website in an iPhone and desktop and inspect the content of the scrolling container I noticed that on iOS the calculated content height of the <p> elements is greater than on desktop.
This seems to be a font rendering related thing as the css of the example site is very minimal. I checked all the relevant css props I could think of (like font-size, line-height, etc) but they all have the same value on both sides.
In the images below <p> elements have a total height of 40px (20px margin + 20px content) on iOS and 38px (20px margin + 18px content) on desktop. This makes the total scrollHeight of the container element to be 4000px on iOS and 3800px on desktop.
I couldn't find any bug related in webkit bug tracker and I don't have at the moment an android device to test or any kind of table, so I could only test on my iPhone vs desktop. This behaviour can be reproduced in any browser.
Things that I tried
Other fonts and still could find differences of more than one pixel
Embed a google font to test if it had to do with native fonts on mobile vs desktop
Instead of 100 paragraphs used only one paragraph but with 100 lines of text
Set -webkit-text-size-adjust prop to none
Used some css resets but the difference persisted
Does anybody have a hint on this?
Desktop Browser
Mobile Browser
I'm quite new to webdev, but I would try using a specific line height for the paragraphs
I have a problem that I believe is a quick solution... I simply can't figure it out myself, however, and a quick run through search didn't help me either.
Basically, the only real issue I'm having I'd like to address is the logo (SERVICE FIRST) not shrinking down to fit inside of the width of the site in a mobile form. While the rest of the site responds fairly nicely (as nice as it usually gets) to the responsive web design, the header image doesn't so much as twitch, meaning it runs "off" the edge of the page.
My site is at www.test.servicefirstsvc.com
If you view it on a mobile device, or simply shrink your web broswer window to a phone size, you'll see the problem. Any help? I can paste relevant portions of the responsive CSS if needed.
Just give the img tag a max-width: 100%; via CSS.
You should add a height: auto; as well because of some weird issues with the Safari browser not paying attention to the aspect ratio of the image.
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'
I'm having issues with some strange padding on the right side of this website I'm working on right now. I'm currently viewing it on a 13" Macbook Pro, full-screen within that viewport. (It has a lot of issues on the smaller viewports that I'm aware of; I haven't gotten to that point in the process.) I've inspected it thoroughly with the developer tools in Chrome but haven't been able to find anything to account for the padding-right or margin-right that's creating the horizontal scroll.
It's currently built with Bootstrap and Flexslider.
Link to repo: https://github.com/helenvholmes/designshow
Thanks!
The horizontal scrollbar also appears on Chrome 25 on my Win 8 64 system, regardless of width.
Try adding overflow: hidden; to the rules for div.flexslider.
That removed the horizontal scrollbar for me and appeared to leave everything else intact. However, please be warned that I haven't tested all the content thoroughly, so look carefully to see if that rule has other unwanted side effects.
How does that work for you?
I wrote a website but I have a bug in it, when I resize my browser my website resizes with it. I have noticed this in Firefox (10.0.2), Chrome (16.0.912.77) and opera (11.60). I tested some other websites omgubuntu webupd8 and when I resize Firefox it still looks good (it doesn't resize with the web-browser). I would love to post images but I need 10 reputation for that.
Using CSS, apply a width (such as 1000px) to your <body> and add margin: 0 auto; to centre the content. You'll have to bring the width of your navigation links down and re-position the ads, but this will stop your site from 'resizing' with your browser.
I strongly suggest using a good CSS Framework. Two good options are:
http://960.gs/
http://blueprintcss.org/
They provide you a fixed width layout as well as an easy way to divide the column into grids.