This puts a patterned background to the site, with a white content area, and a smaller black main content area. This looks fine on large and medium devices, and iPhone landscape. However, when viewed on an iPhone portrait, the main content appears very narrow, due to the white div then the back div.
What I would like is for the main content to appear on the black background filling the whole width of the iPhone in portrait orientation, and not to have the patterned background or white div in this aspect.
I have tried to not display the white div in xs, but this has the effect of not displaying any of the content.
Hi Andy, welcome to the forums, I have read through the page and css you have posted, but there seems to be a lot of css not included. I am not a user of Bootstrap so maybe they have tools that deal with it some other way. It is hard to figure out a problem without knowing what parameters you have for some of these elements to see what is giving you trouble.
I see that your page references 3 css files, maybe one of those files could help shed some light. I don't know that very many people try to view sites on iPhone in portrait mode, mostly because of unresponsive sites you eventually develop the habit of not trying. Or maybe that's just me.
I'm hoping that other Bootstrap users can give you more useful help, it seems to be popular.