When you display only 3 portfolio items in the grid, it is not full width by default, only when you hover over a project does it fill the body container's full width. How can this be fixed?
The problem is that even at 3 projects, they are extremely small on mobile, so 4 is even smaller. I would even prefer to display only 2 projects so that they're larger on mobile.
Tks... it fixes the overall width issue but unfortunately it removes the hover effect of the thumbnails expanding horizontally which I would like to keep to reveal more of the images.
Hello Julien yes you are right, you can also change the padding left of the shortcode portfolio wrap div to bring it closer to the center, but for the optimal solution (if any in this case) I want also to consult our web designer.
You have two instances to consider: the first is the grid displayed, and the second is the grid hovered on one thumb. Here are the width instances for each. Feel free to adjust as needed:
When you display only 3 portfolio items in the grid, it is not full width by default, only when you hover over a project does it fill the body container's full width. How can this be fixed?
Attached files: Screenshot 2023-03-04 at 16.08.00.png
Hi Julien, best is to display four projects, however can you send us your page URL?
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
The problem is that even at 3 projects, they are extremely small on mobile, so 4 is even smaller. I would even prefer to display only 2 projects so that they're larger on mobile.
https://jkflproductionscom.kinsta.cloud/
Hello Julien
try adding this to customizer -> additional CSS
.flex-grid .portfolio-shortcode .item {
width: calc(4 * calc(1/10 * 100%));
}
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Tks... it fixes the overall width issue but unfortunately it removes the hover effect of the thumbnails expanding horizontally which I would like to keep to reveal more of the images.
Hello Julien yes you are right, you can also change the padding left of the shortcode portfolio wrap div to bring it closer to the center, but for the optimal solution (if any in this case) I want also to consult our web designer.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
ok, please do, I would appreciate a fix for that issue. tks.
You have two instances to consider: the first is the grid displayed, and the second is the grid hovered on one thumb. Here are the width instances for each. Feel free to adjust as needed:
.flex-grid .item { width: calc(4 * calc(1/10 * 100%)); }
.flex-grid .item:hover { width: calc(10 * calc(1/10 * 100%)); }
To apply these changes, simply add the code to Customizer -> Additional CSS. If you have any questions or need further assistance, please let me know.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Tks... Much appreciated.