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?
Related
Trying to attain a near-exact cross-browser experience for our clients, lately, I've come to a problem that I can't fix. I've got the website up and running, and it's functioning smoothly on every and each browser, expect Mozilla Firefox. The problem that occurs in Firefox, is that I get to witness a broad white space on the right side of the site's main contents, and it is arising from my responsive css3 slider. The link below shows you 100% of the slider's codes, which works perfectly on jsfiddle;
Css Slider
but well, the problem is that each article tag is taking its space, even when it's hidden and not being displayed in Mozilla. So the more the slider comes toward the end of it, the less white space I get to see. The next upcoming slides are hidden, but however, they are still occupying a certain space, which forces a lot of vacuous area on the right side.
You can check the website itself at the link below;
My Website
Hoping that I have clearly stated the issue, what could be the possible solution for this matter ?!?
Adding overflow-x: hidden on the <html> tag seems to fix it. I'm not sure why, though. Hopefully someone has a better solution.
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 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 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.
I have a weird one: on my site http://tustincommercial.com some pages are aligned slightly differently from others, giving a jumping effect.
Compare http://tustincommercial.com vs http://tustincommercial.com/who-we-are to see the effect.
The markup is identical, apart from the content in the middle. The same CSS is being applied.
Now, the real killer is that this difference disappears when developer tools are open. All browsers (IE8, Chrome, Safari, Firefox, Opera) show the difference when developer tools are not open. None of them show the difference when their developer tools are open.
Any ideas on the best way to find and fix the source of the difference?
The issue comes from the scrollbar appearing when your content goes past the bottom of the window. When the developer tools are open all pages need to scroll, so the jump disappears.
There are a few ways to fix this, but I currently can't tell you what would be best for your site. You could make it fixed width, you could try using max-width, or you could force the scroll bar to always be present:
html {
overflow-y: scroll;
}