Page from DW template not displaying properly on iPad

[gunzelguy]

I've created a page from a DW template, the page looks great on a desktop, on an iphone in both landscape and portrait and on the ipad in landscape but on the ipad in portrait orientation it looks like this. I suspect the banner at the top is the culprit but cannot see how I can change it.

http://www.victorianrailways.net/photogallery/westsou/sunshine_ballarat/sunshine_ballarat.html

[Ben M · Accepted solution]

The reason it is extending to the full width on desktop and smaller on other devices has to do with the bootstrap code you are using.  That area is 12-columns wide on a desktop and set to 8-columns wide on mobile noted by the classes col-sm-8, col-md-12.  If you just want it to be 12 for all, just use col-sm-12 and it won't shrink as you are seeing it.

[Nancy OShea]

If you just want it to be 12 for all, just use col-sm-12 and it won't shrink as you are seeing it.

==========

Right.  Col-12 is the default width in Bootstrap anyway.  And this is essentially a 1-col layout.

The only time I use separate col- classes for sm, md & lg is when I have multiple columns on the same row that need to break to fewer cols on smaller devices. 

[Nancy OShea]

I think you have put yourself in the pickle jar with custom breakpoints that you probably don't need.  At any rate, try fixing your code errors and see if that helps.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.victorianrailways.net%2Fphotogallery%2Fwestsou%2Fs...