Modify size of .pdf window on item.html page?

[McGillHeritage]

Hello!
I am doing a project that consists primarily of .pdf files. One of my viewers is elderly (with impaired vision) and he is having trouble reading the .pdf text in the window - even when expanded to 100%. Currently, it seems that the .pdf window takes up about 50% of the screen when viewed on a PC desktop. He asked if there was any way to have the .pdf window comprise a larger portion of the screen and the text on the right side (title, creator, date, etc.) a smaller portion? Maybe 70%/30%? I realize he can download the .pdf (or scroll in the window), but I thought I'd see if there was an easy was to achieve this to make him happy.
Thanks much!
Marcie (now working on a project for McGill, NV) 😊

[evanwill]

@McGillHeritage Sure, there are a few ways to do that.

First, you could modify the existing "_layouts/item.html" in your project. If you look at around line 21+, there is a bootstrap row and columns. In your current projects it looks like:

<div class="row mt-3">

        <div class="col-md-6" >
            <div class="card mb-4 text-center">
                <div class="w-100 text-center p-1" id="item-image"></div>
                <div id="item-link" class="text-center my-2"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div id="item-metadata" class="metadata">
            </div>
        </div> 
    </div>

The two places where it says "col-md-6" makes two columns that are half of the space each (a full row is 12, so 6 = half). So you can tweak the two "col-md-6" to be one "col-md-8" and one "col-md-4" to have the pdf take up more space (the two columns should add up to 12 if you want to split up the space). Alternatively, you could make them both "col-md-12" to make them both take up the full space.

Second, there was just recently a major update to the item page layout in CB-GH, so a pdf now looks like this example pdf item page. Would that be wide enough? To make your item page look like that, you would need to copy four updated files from the main CB-GH repository and replace them in your projects: _includes/js/item-js.html, _includes/js/modal-hash-js.html, _layouts/item.html, and _sass/_pages.scss. (you could also fully refresh your template, all your config files and metadata would be fully compatible)

Let me know if that helps!

[McGillHeritage]

Thank you Evan! The new GH template works even better than what I imagined. I will modify my existing GH site with the new files.
Marcie

[dcnb]

This isn't very helpful on your original question, but just wanted to say Hi Marcie/ @McGillHeritage! Good to hear from you and so glad to see you're using CB for other orgs!