Full Screen Width Elements in Spire Frontend

stkitzrow

Vote:

We would like to have full screen width elements for banners, images, and other elements to create a better look and feel for our site. I'm wondering if there's a recommended way or example to create full screen elements in spire. I tried overrides the Row and Rows Basic widgets, but it seems that the entire layout is wrapped in a Grid Container, so any new widgets created will also have a container. Thanks

#274537

Feb 25, 2022 3:19

stkitzrow

Vote:

I solved this by overriding the page within my custom blueprint. An example here would be an override of the the HomePage.tsx, where you use the "fullWidth" property on the Page component to render it as full width for different screen-width breakpoints:

const HomePage = ({ id }: PageProps) => (
    <Page data-test-selector="homePage" {...styles.page} fullWidth={[true, true, true, true, true]}>
        <Zone contentId={id} zoneName="Content" requireRows />
        <Modals />
    </Page>
);

So for each page I want to use full width I'll need to create an override. This could make it somewhat painful if there's a full-screen banner on every page of the site. I have a feeling there is a more reusuable way to do this using something such as a page template. I will post back here if I find more, but this gets my home page looking the way I want.

#275917

Mar 08, 2022 20:47