Mobile flexbox layout for custom people search template

[cluber22]

Hi,

This is kind of related to #2063 however my issue is more of changing layouts depending on device viewport.

I've created a custom template with extra fields for the People search which is working nice, it's a 2 column layout. My issue is when viewing the page on mobile, two columns doesn't work and it needs to be one column on mobile.

Now I have played around with using flexbox and media queries, but it doesn't seem to like it.

Is there a standard way of doing this? I am currently editing the "results template" on page 2 of the configuration.

Results Template CSS

<style type="text/css">
mgt-person {
	--initials-background-color: [{{@root.theme.palette.themePrimary}}](mailto:%7b%7b@root.theme.palette.themePrimary%7d%7d);
}

 /* TWO COLUMN FLEXBOX */
 .Flex_Parent {

   display:flex;

   flex-direction:column;

 }

 /* TWO COLUMN FLEXBOX */
 .Flex_Child {

   flex: 1 1 0;

   border:1px solid blue;

 }


 /* anything larger than a mobile screen */
 @media only screen and (min-width: 632px) {
   .Flex_Parent {
		flex-direction:row !important;
   }

 }
</style>

[FranckyC]

Hi @cluber22, you can start from the 'Cards' layout template as it already should be mobile compatible:

<style>
        /* Assign the correct size % ratio according to the number of wanted cards on a single row. We use flexbox instead of static grid to deal with SharePoint canvas sections*/
        .template--card {
            flex-grow: 1;
            flex-shrink: 1;
            min-width: 206px; /* Min width of the Office UI Fabric document card */
            flex-basis: {{@root.properties.layoutProperties.columnSizePercentage}}%;
        }    
    </style>

[cluber22]

Hi @FranckyC,

Thanks for the information, I've been trying to work it out using https://microsoft-search.github.io/pnp-modern-search/usage/search-results/layouts/

My issue is that this is targetted towards "documents" and I am looking to display people, with about 5 fields of data in there.

How is this possible?

Thanks again.

[wobba]

You'll end up having CSS which allows for the wrapping, and this is the "standard" web way. Nothing special in our templates really.

[cluber22]

Hi wobba. So I have written custom CSS on the People type, but want the Card type. Is there a way to display the people data and not documents within the 'Cards' type?

[wobba]

Yes. Put this in the Preview Image slot: /_layouts/15/userphoto.aspx?size=L&username={{getUserEmail (slot item @root.slots.UserEmail)}} and turn off to show file icons.

Then change the properties for the other card places.

[cluber22]

Thank you so much wobba just what I needed. Just need to play around with the image format now. Cheers.