Feed won't fill 100% of mobile screen

There is this 50% width in media query for screen wider than 820px

@media (min-width:820px) {
	div#content { width: 50%; }
}

So for screen lower than 820px, the content will span 100% because there is no width assigned, for screen wider than 820px it will be 50% in width. Basically you need to work on the breakpoints, have more breakpoints or use a more proper breakpoint.

The

‘@media (min-width:820px) {‘

Doesn’t apply to mobile formatting, only when the window is shrunk on desktop. I just commented it out right now and deleted the max-width on top so it didn’t confuse anyone.

The mobile formatting is done by the CSS Mobile Plugin which for some reason only formats down to 980px. I just need to figure out how to change or get rid of the 980px constraint.

Here’s the css that runs the mobile site:

https://duenorthsports.com/wp-content/uploads/2015/06/MobileCSS.txt

Right now, the 50% width is applied to all screenwidth, because you took out that min-width. This and my previous inspection confirm that the 50% width in CSS is what’s causing it. To fix this, have more breakpoints with different widths assigned to the content, or use a more proper breakpoint.

Note: my inspection is based on FireFox inspect element tool, using the responsive design mode, and I never tested it in real mobile phone.

If you’re using the Firefox inspect element tool you’re seeing the desktop style.css which has no relevance to the mobile css. Unless you are on a mobile device or using the Chrome Dev Tools mobile emulator you won’t see the mobile css. This is because I’m using the Mobile CSS plugin. I’d suggest the Chrome Dev Tools mobile emulator.