Responsive Image Grid In Gallery Addon
Linda
Hello, I am trying to set up a responsive image grid in the Gallery Addon in the Selixo template. I have added custom CSS to try and achieve this. Result - a responsive grid using all the images. My issue is that it is showing with a blank area where the first image should be positioned, but the first image is appearing in the second image slot.
Here is the custom code I have used:
.sppb-addon-gallery .sppb-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 2fr)); gap: 5px; padding: 0; margin: 0; }
.sppb-addon-gallery .sppb-gallery-item { overflow: hidden; border-radius: 8px; position: relative; }
.sppb-addon-gallery .sppb-gallery-item img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.3s ease; }
I haven't been able to remedy this and would appreciate some assistance to get this showing a full grid with the first image in the first grid space. Thank you.
Atick Eashrak Shuvo
Accepted AnswerHello,
Thank you for clarifying. We understand that the custom CSS approach works better for your specific requirement, particularly because using auto-fit allows the gallery to make better use of the available width across different screen sizes.
If you feel that using your custom CSS is the best approach for your website, you can continue with it. To address the blank space before the first image, you can add the following CSS:
#addonId .clearfix:before {
content: unset !important;
}Please note that providing or developing custom CSS solutions is outside the scope of our standard support. However, I have provided this particular fix to help you get a good starting point with your existing CSS implementation.
We hope this helps you achieve the desired gallery layout.
Best regards
Atick Eashrak Shuvo
Accepted AnswerHello,
We apologize for the inconvenience.
I have checked the Gallery Addon and made the necessary adjustments. I removed the custom CSS and configured the item width directly from the Gallery Addon settings for different devices to ensure the gallery remains responsive.
Could you please check the gallery now and confirm whether the images are displaying correctly, with the first image appearing in the first grid position?
Thank you for your patience and understanding.
Best regards
Linda
Accepted AnswerHi, thank you for looking at this for me. It is better, but a little odd in some responsive views. Before I had everything filling the full width of the column but now on some views, i.e., variety of portrait tablet sizes and large landscape tablet, I am seeing the image gallery does not fill out the full width so the video that will appear under is larger than the image gallery in some cases - not such a great look. Can we use percentages instead of pixels.
Atick Eashrak Shuvo
Accepted AnswerHello,
Thank you for the additional details.
We understand the concern regarding the gallery not filling the full column width on certain tablet screen sizes.
To ensure the gallery maintains the correct width across different responsive breakpoints, please set the Width value for each device directly from the Gallery Addon settings. You can refer to this screenshot for guidance:
Please adjust the width for the relevant tablet and other device breakpoints so that the gallery fills the full available column width.
Best regards
Linda
Accepted AnswerYes thanks, I understand I can tweak for different devices, but there are many variables within these device breakdowns that we are able to set. There will still be instances when the column is not completely full and therefore appears as out of alignment. This limitation is due to needing to use exact pixels.
Atick Eashrak Shuvo
Accepted AnswerHello,
Thank you for clarifying.
Please note that SP Page Builder uses predefined responsive breakpoints, and these breakpoints are fixed within the system. There is currently no option to add or modify the breakpoint ranges directly from the addon settings.
The responsive width settings in the Gallery Addon apply to these predefined breakpoints. Therefore, there may be certain screen sizes within a breakpoint range where the gallery does not perfectly fill the available width.
If you need to target specific screen sizes or devices outside the predefined responsive breakpoints, this would require custom CSS with appropriate media queries.
We apologize for the inconvenience and appreciate your understanding.
Best regards
Linda
Accepted AnswerExactly and that is why I was trying to use custom CSS to overcome that very issue. That code had auto-fit on the columns which made them always full width. It was correct over all size devices. My issue only was the first image not appearing in the first grid space (leaving it blank) and positioned in the second image grid space to the right. I was hoping that could have been remedied.
Linda
Accepted AnswerHi, that's absolutely perfect across all devices now. That was the last CSS portion I couldn't work out myself. Really appreciate the support. Thank you!
Atick Eashrak Shuvo
Accepted AnswerHello,
You’re very welcome! We’re glad to hear that the gallery is now displaying correctly across all device sizes.
Thank you for your patience while we worked through the issue, and we appreciate your kind feedback. If you need any further assistance, please don’t hesitate to reach out.
Best regards