I looked up most of the questions on here about fit to page but my case may be a little different.

On my page, I have the followings:

[Header ]

  1. Title (picture from assets)
  2. 6 world clocks
  3. marquee
  4. Text
  5. 4 buttons
  6. title

[Middle] Tabbed View of Three Lists

I got a request from my client saying on his TV Screen monitor, he has to shrink the web page to 70% so that he could see the whole page without 'Scroll Bar' at the bottom.

So I copied that homepage and worked from scratch to find out which of these content editors were making the problem.

All the content editors are set to 'No - fit to size'. I found that 'marquee' & 'tabbed list' were the problem (there might be more) when I added them to my Copied Homepage, the scroll bar appeared.

When I went to Source Code for Marquee, It had 1500px; so I changed it to 100%; Then for the Tabbed List, I went to the Header and added a content editor and on the Source Code I inserted:

<style type="text/css"> .ms-vh-div[DisplayName='ColumnName'] { width: 100%; } </style>​​

Which removed the scroll bar and I have Duo Monitors with slightly different size and both looked fine on Chrome and IE.

I told my client to test it but he told me, it got little better because now he only needs to Shrink 75% from 70%.

I want so that this page will fit to screen no matter how big the screen is.

Is there a solution to this?



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.