Page layout and having sections in landscape or page width?

[kat-grant]

I am working on a project where we will embed some external material using iframes (from sources like Knightlab JS timeline) - the embedding works fine on a basic page, but using the standard page template it constrains it to quite a narrow view. If we wanted to set up these pages with a landscape orientation what would be the best way? Do we need to add custom CSS or is there a page type that would allow us to this already there that I haven't found?

I can see ways to add images with a wider view - but not sure about doing this for text and embedded content?

See screenshot of current set up

[geealbers]

Hi @kat-grant, yes, this will require some custom CSS. There's not an existing Quire template that would work.

There's a bit of CSS in the templates now that keep the page text column at the same, fixed width as the browser window gets to 700px width and wider:

@media screen and (min-width: 700px) {
  .container {
    margin: 0 auto;
    max-width: 720px;
    width: 720px;
  }
}

By overriding that with some custom CSS. You can get the result you want. Following is the approach I took when testing this out.

First, I added a full-width-page class to the page I wanted to target. In this way, I can apply my custom CSS only to this page, not to every page in the project.

---
title: My Sample Page
layout: essay
order: 10
classes:
  - full-width-page

Second, I added the following CSS to the content/_assets/styles/custom.css file in my project.

@media screen and (min-width: 700px) {
  /* Set the default container width to 100% */
  .full-width-page .container {
    max-width: 100%;
    width: 100%;
  }
  /* Use the asterisk selector to set all the individual elements 
     within the container back to the default 720px width,
     except for any <iframe> elements */
  .full-width-page .container .content > *:not(iframe) {
    margin-right: auto;
    margin-left: auto;
    max-width: 720px;
    width: 720px;
  }
  /* Set the width of <iframe> elements explicitly to 100% */
  .full-width-page .container .content > iframe {
    max-width: 100%;
    width: 100%;
  }
}

And finally, I set the secondary background color of the whole project to white in the content/_assets/styles/variables.scss file. Because otherwise, the light bluish-gray in your screenshot shows up awkwardly at the top and bottom of my full-width-page but not along the sides. So, looked cleaner just to back all the backgrounds white.

$secondary-background-color: #fff

Here's the result using a 3D iframe embed from the Smithsonian: