• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Page from DW template not displaying properly on iPad

Explorer ,
Apr 28, 2021 Apr 28, 2021

Copy link to clipboard

Copied

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

 

IMG_0033.PNG

Views

165

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 28, 2021 Apr 28, 2021

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.

Votes

Translate

Translate
Community Expert ,
Apr 28, 2021 Apr 28, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 28, 2021 Apr 28, 2021

Copy link to clipboard

Copied

LATEST
quote

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 O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 28, 2021 Apr 28, 2021

Copy link to clipboard

Copied

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...

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines