Develop Reference

What is stopping this web page from shrinking to fit widths of less than 530 pixels?

I have tried to make my site tokyocomedy.com to be responsive design down to a minimum of 320 pixels wide. Most, if not all, pages, such as this top page look reasonably good down to that size, using Firefox's responsive design view:
However, this one page, the schedule page, is not working:
The width it gets stuck at seems to be around 530 pixels:
The only thing that is different on this page is the calendar, so I could be wrong, but my best guess is that something about the calendar CSS or JavaScript is holding some minimum width or padding space or something. I have gone through all the elements I can find using the Firefox web developer inspector:
Relevant CSS IDs and classes seem to be #calendar, fc-toolbar, fc-header-toolbar, fc-view-container, fc-view, fc-list-month-view, fc-widget-content, and fc-widget-header. However, I can't find any width declarations, padding, margins, or any other sizing declaration that would explain why the page will not shrink horizontally. It's possible that maybe there is JavaScript acting on the styling that is altering it in a way that is less easy to find.
The page uses the fullcalendar v3.9.0 JavaScript library. I've put the CSS in use on PasteBin for reference.
What is preventing this calendar page from shrinking down to 320 pixels like other pages on the site?

There is a small error in your code. You need to use word-break css property here as your email text is big. kindly refer to attached screenshot.
Hope it solves your problem.

please add below two property and check
* {
box-sizing: border-box;
}
#maincontent {
float: left;
width: 100%;
}

You used display:inline-block style.css line no. 60 ,use display:block rather than display: inline-block
#maincontent, #upcomingshows, #recentblog{
display:block;
vertical-align: top;
}

How do you disable horizontal scrolling on a webpage?

How do you disable horizontal scrolling on a webpage?
I understand that this question has been asked many times before on stackoverflow (here, for example).
The most common answer says use CSS to set overflow-x: hidden; or max-width:100% for the html/body elements. However, these seem to hide the scrollbar but still allow the user to scroll with middle clicks, trackpad swiping, and touchscreen swiping. I'm looking for a solution that allows NO horizontal scrolling of any form.
The next most common answer says don't make your content wider than the screen. Maybe this is a good answer, but in general it's not very helpful and in my particular situation I don't know how to make my content fit.
Are there better methods for preventing horizontal scrolling?
To give you an idea of the problem that's motivating my question, take a look at http://www.tedsanders.com/BetTheBill/. So that you can see the problem better, I have highlighted the offending svg element in gray. When you click the green 'Bet The Bill' button, the svg rotates. If your window is small, the corners of the gray rectangle sometimes end up pointing off the screen and make horizontal scrolling possible.
I've tested this issue on the current versions of Chrome, Android Chrome, Firefox, and IE11. Only IE11 gives the behavior I want, with no horizontal scrolling.
Edit: Thanks to your helpful answers, I now have a solution. I'm going to implement it soon, but unfortunately that means my link above, originally meant to illustrate the problem, will no longer illustrate the problem. Sorry to all future visitors! (Perhaps in hindsight I should have made a fiddle. Although who knows how long that will even last...)
Edit2: Beware, the javascript solution below does not necessarily work on mobile browsers (in my version of Android Chrome there is significant jitter).
Edit3: Aha! My friend told me that overflow: hidden; will indeed work, but it needs to applied to the parent div and not the body or html or another ancestor. This looks like the best solution!

Try this:
html {
overflow-x: hidden;
width: 100%;
}
body {
overflow-x: hidden;
width: 100%
}
I believe overflow-x: hidden; will only stop the particular element that it is applied to from scrolling, so outer-more elements can still cause the window to scroll. Applying it to html and body should prevent anything which exceeds the width and height of window from causing the window to scroll.
Adding width: 100%; will force the html and body tags to be exactly 100% the width of the window.
But in your example that's not the problem. For some reason the <div class="container"> sometimes displays another set of scrollbars just for the container and the scrollbars appearing and disappearing is what causes the container's movement.
You can fix it by adding to following:
/* overflow: hidden; stops the second set of scrollbars */
/* I increased the width by 300px and added 150px padding on either side. This stopped the grey background from disappearing when the pie chart rotated. */
.container {
overflow: hidden;
width: 930px;
padding-left: 150px;
padding-right: 150px;
}

var offset = window.pageXOffset;
$(window).scroll(function () {
if(offset != window.pageXOffset)
window.scrollTo(0, window.pageYOffset);
});
Also do not forget to hide overflow.

Aha! My friend gave me an answer so I came back here to post it for all of you. overflow: hidden; will indeed work, if it is applied to the parent div and not the body or html or another ancestor. And unlike the javascript solution kindly provided by user3796431, it even works on mobile.

Javascript on mobile site is making screen too wide

Here's the site:
http://philly.thedrinknation.com/mobile
On smartphones, the screen is too wide - allowing you to scroll to the right a little bit, rather than being exact fit.
On a desktop you can reproduce this in FF, make your browser about 350 px wide, then use the keyboard arrows to scroll right.
I have narrowed this down to the javascript from sharethis:
http://w.sharethis.com/button/buttons.js
If I take out that call, the page is fine. Add it back in (even on pages not using the widget), and the scrolling comes back.
It looks like they modified their code back in March, and I'm guessing that might be related. I asked them about it, but so far no response.
Can anyone give me pointers on debugging this further? I will copy the .js file locally to edit it if need be, but so far I can't see what is causing the problem.

Strictly speaking, your issue isn't caused by javascript. Rather, it's caused by styles that AddThis is using. The #stwrapper element used by AddThis has an explicit width of 354px that is causing your issue. The problem is caused by this css coming in an AddThis stylesheet (hosted by them):
.stwrapper {
position: absolute;
width: 354px; /* This is causing the issue. The width of this element ensures that the page can never be smaller than 354px */
z-index: 1000000;
margin: 0;
padding: 0;
top: 0;
left: 0;
visibility: hidden;
height: auto;
}
As this stylesheet is coming from AddThis and you don't have control over it, you need to override the styles in your own stylesheet while ensuring that AddThis still works as intended.
I can't see where you're actually using AddThis, so it's hard for me to suggest what style adjustment you should make that will fix the width issue and keep AddThis working, but something like the following would be a good start:
.stwrapper {
width:auto;
}

Very strange issue in IE9 with entire page jumping

EDIT: The client wants to do some testing with disabling the click and drag feature in IE, so at this current moment you will be unable to replicate the bug. I understand if this effects the communities ability to assist in fixing the ultimate underlying problem.
So here is the problem. It occurs in IE9 and IE8 when the screen height or more specifically the browser height is less than the height of the website main container. The website scrolls horizontally so its total height is somewhere around 700 or 800 pixels.
To reproduce this bug you have to open up this url: http://dev.gregoryfca.com/ in IE9 and make the height of the browser somewhere around 500 or 600 pixels. So this will force the page to start scrolling vertically top to bottom.
Keep it all the way to the top so you can still see the G logo and the menu as well as the social icons. Then click in the white area and dont let go. You can click in the white area next to the Our People section.
When you click start to drag your mouse to the right. This will start the page scrolling and allow you to use the horizontal scroll feature.
So here is the bug. In IE9 when the browser height is smaller than the total website height, when you click and drag in the middle section to scroll horizontally, the whole page jumps down vertically so that the absolute top of the screen is the top of the #drag-wrapper element.
I dont want the page to jump when you are scrolling horizontally. If you put together this same set of circumstances in Chrome or Firefox you will see this bug is not present there.
I think it has something to do with the way IE treats focused elements with certain positioning, or something like that. The site uses lots of jQuery as you will see.
Does anybody have any idea. I have basically exhausted everything I can think of.

try giving left and top property to this css class:
#drag-wrapper {
height: 610px;
margin: 35px 0;
overflow: hidden;
padding: 0;
position: absolute;
left:0;
top:150px;
width: 100%;
-moz-tap-highlight-color: rgba(0,0,0,0);
-moz-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
z-index: 4000;
}
As you can see this class has position:absolute but it doesn't have the left and top property. make margins to 0 if requires.

Scroll website with mouse wheel, not drag to scroll

I've built this website based off a template where you drag to scroll through the photos but due to a change of requirements I need to change it so you just scroll a mouse wheel to scroll like normal website do.
Any idea from the code how this is done?
Not even sure if it's wholly CSS or JS.
http://www.replyonline.co.uk/DirectionGroup/xmas/index.php
Thanks,
Tim

It's using JavaScript - specifically jQuery Kinetic by the looks of it.
If you turn off JavaScript (or remove the script from the page), it scrolls like a 'normal' page.
EDIT :
Outside of the Kinetic plugin (didn't look where), the script is changing the overflow CSS to hidden; this needs to remain as scroll, as per the inital state of the page sans JavaScript.
.ib-main-wrapper {
bottom: 24px;
left: 18px;
overflow: scroll;
position: absolute;
top: -98px;
margin-top: 115px;
outline: medium none;
width: 100%;
}

sounds like you question is based on this
Remove HTML scrollbars but allow mousewheel scrolling
which points to this
How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?