Full Screen Width Elements in Spire Frontend


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

Feb 25, 2022 3:19

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

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.

Mar 08, 2022 20:47
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.