matthewhodges

Hello. I'm experiencing a similar issue. I have a 7.1 site which I'm fairly happy with, and I initially thought upgrading to fluid engine would give me more options. However, I'm also stuggling to get my head around the grid. Like you I'm a graphic designer, and so I need to display designs without them being cropped, but I also need my margins to be consistent.
What I can't work out is, what is the apsect ratio of each cell in the grid? I'm not sure it has a fixed ratio (if you make you browser window smaller, it starts to look more square). Also, why are the cells rectangular? It seems to me that if they were square then figuring out aspect ratios for your images would be easier (although you would still have to factor in the cell spacing, so maybe not).
Did you figure anything out yet? My initial enthusiasm for fluid engine is giving way to frustration…

It looks already centered now?

Use this code for masonry
/* Masonry to grid mobile */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(1,1fr) !important; grid-column-gap: 10px; grid-row-gap: 10px; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: 100% !important; } }  

I have been building a new portfolio site in 7.1 using a portfolio page as my homepage. Intially I thought this was a great feature, but it now appears it is missing some basic functionality – specifically, the option to disable/hide the portfolio sub-pages. Firstly, without this functionality it is not possible to build a sub-page in the background and make it live when you are happy with it – it is immediately live, which is surely no one would want (other page types have a disable function to keep them invisible from site vistors). Secondly, a disable/hide function would allow you to create a portfolio with lots of pages, and then select which ones to display in the main portfolio page – meaning you could keep your portfolio fresh by swapping projects in and out very easily. Without this functionality, the only option is to delete and then rebuild the sub-pages, which is very time consuming!

Has anyone else come up against this issue and perhaps come up with a solution? And could anyone who wants this functionality please email customer support to request it – they will only prioritise it if enough people ask.

@matthewhodges I see pagination is not line up on mobile. If you want, we will give the code

This is perfect for me, thank you so much!

You can use this trick, notice the nth(1) nth(2) is indicated the first and second image, you can assign different image for next item that way
section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item .gallery-grid-item-wrapper img { opacity: 1; } section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item:hover .gallery-grid-item-wrapper img { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; opacity: 0; } section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item .gallery-grid-image-link { z-index: 999; } section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item .gallery-grid-item-wrapper:after { content: ''; position: absolute; width: 100%; height: 100%; z-index: 0; background-repeat: no-repeat; background-size: cover; opacity: 0; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item:hover .gallery-grid-item-wrapper:after { opacity: 1; } section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item:nth-child(1) .gallery-grid-item-wrapper:after { background-image: url(https://www.nps.gov/common/uploads/stories/images/nri/20160426/articles/5097608B-1DD8-B71B-0BB1933DB95CC94C/5097608B-1DD8-B71B-0BB1933DB95CC94C.jpg); } section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item:nth-child(2) .gallery-grid-item-wrapper:after { background-image: url(https://www.nps.gov/common/uploads/stories/images/nri/20151216/articles/C6E16F5A-1DD8-B71B-0BAB45B9358DD9C8/C6E16F5A-1DD8-B71B-0BAB45B9358DD9C8.jpg); }  

Site URL: https://www.matthodgesdesign.com/
Is it possible to add simple image rollover effects to a grid gallery in 7.1? All I want for the image to change to a second image on mouse/cursor hover, and then change back on hover off (preferably with a smooth transition). Clearly this isn't possible with the standard controls, but wondering if possible using CSS and custom files? I've been searching online (and on here) and not found the answer, which is surprising in that I would have thought this would be a sought after feature.
On my site I have added a simple brightness hovereffect to the images which gives it some interactivity. But preferably I would find away to change to a second image on mouse hover.

I have been building a new portfolio site in 7.1 using a portfolio page as my homepage. Intially I thought this was a great feature, but it now appears it is missing some basic functionality – specifically, the option to disable/hide the portfolio sub-pages. Firstly, without this functionality it is not possible to build a sub-page in the background and make it live when you are happy with it – it is immediately live, which is surely no one would want (other page types have a disable function to keep them invisible from site vistors). Secondly, a disable/hide function would allow you to create a portfolio with lots of pages, and then select which ones to display in the main portfolio page – meaning you could keep your portfolio fresh by swapping projects in and out very easily. Without this functionality, the only option is to delete and then rebuild the sub-pages, which is very time consuming!

Has anyone else come up against this issue and perhaps come up with a solution? And could anyone who wants this functionality please email customer support to request it – they will only prioritise it if enough people ask.

I also don't understand why certain settings have to affect portfolios site-wide. For example the cropping ratio – it appears you can't have one portfolio on your site cropped to 1:1 and another cropped 3:2. Clearly consistency of presentation has been prioritised which makes sense, but being able to override certain controls without the use of custom CSS would be useful.

I have been building a new portfolio site in 7.1 using a portfolio page as my homepage. Intially I thought this was a great feature, but it now appears it is missing some basic functionality – specifically, the option to disable/hide the portfolio sub-pages. Firstly, without this functionality it is not possible to build a sub-page in the background and make it live when you are happy with it – it is immediately live, which is surely no one would want (other page types have a disable function to keep them invisible from site vistors). Secondly, a disable/hide function would allow you to create a portfolio with lots of pages, and then select which ones to display in the main portfolio page – meaning you could keep your portfolio fresh by swapping projects in and out very easily. Without this functionality, the only option is to delete and then rebuild the sub-pages, which is very time consuming!

Has anyone else come up against this issue and perhaps come up with a solution? And could anyone who wants this functionality please email customer support to request it – they will only prioritise it if enough people ask.

Can be, please paste this into Settings->Custom Css
.header-layout-branding-center-nav-center .header-title-nav-wrapper { width: 100%; display: block; flex: 100%; }

That worked perfectly, thank you!

I have been building a new portfolio site in 7.1 using a portfolio page as my homepage. Intially I thought this was a great feature, but it now appears it is missing some basic functionality – specifically, the option to disable/hide the portfolio sub-pages. Firstly, without this functionality it is not possible to build a sub-page in the background and make it live when you are happy with it – it is immediately live, which is surely no one would want (other page types have a disable function to keep them invisible from site vistors). Secondly, a disable/hide function would allow you to create a portfolio with lots of pages, and then select which ones to display in the main portfolio page – meaning you could keep your portfolio fresh by swapping projects in and out very easily. Without this functionality, the only option is to delete and then rebuild the sub-pages, which is very time consuming!

Has anyone else come up against this issue and perhaps come up with a solution? And could anyone who wants this functionality please email customer support to request it – they will only prioritise it if enough people ask.