Format of Gridder in Mobile

@bpasko

I took a look, It appears you do have quite a bit of custom CSS which negatively affects the view on smaller screens such as mobile devices. This custom CSS is causing the issues with the image grid displaying overtop of the category drop and and character index. The custom CSS is also causing the display issue with the phone and email in the panel to be out of position on mobile devices.

You’ll have to adjust your custom CSS to take mobile devices into consideration.

As for the panel width when expanded/opened, that will be the max width of the number of columns in the grid currently being displayed. So if the current width is 3-columns, the panel width will be 3-columns wide. If it the grid is 1-column the panel will be 1-column wide. This is the way the design has always been. I am open to making a tweak where the panel is 100% width when only 1-column wide. I’ll have to give it some thought because after some years this is the first time this has come up.

You can force this design tweak by adding this bit of custom CSS:

@media (max-width: 480px) {
	#cn-gridder #cn-list-body {
		width: 100% !important;
	}
}

Hope this helps! Let me know.

I am still having issues with the design of the gridder in mobile.

The content below the headshot images stretches across the mobile device, but the headshot image only fills about 1/2 to 2/3 of the frame, which looks horrible from a mobile perspective, especially since the images are not centered. How can I center the images and/or make them wider so they fill the entire width of the mobile screen?

Similarly, how can I center the search and category boxes so they don’t look like they were just tossed onto the page? Most of my users are going to be accessing this content from a mobile phone so I have to get this right.

https://staging1.lewisandclarkcharter.org/staff/

Thank you.
Brian

@bpasko

RE: The content below the headshot images stretches across the mobile device

Yes, that is what the CSS I gave will do which will be included in the next update so there is more space for the entry content when viewing a single columns.

RE: the headshot image only fills about 1/2 to 2/3 of the frame

The image will be the size you set the grid to. If you would like a wider image, you can do so by configuring the grid size. Here’s the link to the docs with the details:

https://connections-pro.com/documentation/gridder/#Grid_Size

RE: can I center the images and/or make them wider so they fill the entire width of the mobile screen?

You can use use CSS to center the image:

@media (max-width: 480px) {

    #cn-gridder #cn-list-body {
        text-align: center;
    }

    #cn-gridder .cn-gridder-overlay {
        text-align: left;
    }

}

Using CSS to scale the image up will result in a blurry image. After a little bit of trial and error I came up with:

@media (max-width: 480px) {

    #cn-gridder .cn-gridder-item {
        display: block;
    }

    #cn-gridder .cn-gridder-thumb {
        width: 100% !important;
        display: block;
    }

    #cn-gridder .cn-gridder-thumb span.cn-image-style,
    #cn-gridder .cn-gridder-thumb span.cn-image-style span {
        width: 100% !important;
    }

    #cn-gridder img.cn-image {
        width: 100% !important;
    }
    
}

It is not perfect, but you could spend time with it to get it exactly how you want it.

RE: how can I center the search and category boxes so they don’t look like they were just tossed onto the page?

They are not just tossed on the page. One is left aligned while the other is right aligned. And they move inward based on the screen width.

You can try this CSS to center it:

@media (max-width: 480px) {

    #cn-gridder span.cn-search {
        display: block;
        float: none;
        text-align: center;
    }

    #cn-gridder .chosen-container.chosen-container-single {
        display: block;
        margin: 0 auto;
    }
}

Hope this helps you!