Hello I am having this problem, or similar. on the elfsight calendar dashboard it shows 4 cards across, but when it gets updated to the embedded widget, is not showing only 1 card (kind of cell phone), even though I have that section stretched and full width in elfsight and website, grid and other works fine
Hi there, @Norton ![]()
We’ve fixed the Issue with the Masonry layout using this code in the Custom CSS field on the Style tab of your widget’s settings:
.global-styles,
.preview-content-holder.shrinker-content:has(.elfsight-app-ed3490eb-34a5-48d7-9851-91686d521d35) {
width: calc(100% - 20px) !important;
}
As for the customization of the grid cards, I see they are rectangular in your widget now. Could you please double-check it on your end?
Thanks for response @Max but in my previous comment you can see the Image in each card lets focus on the Zumba, on the GRID is a square-ish card, the picture is cut out, but the MASONRY the card is more a vertical rectangle, the picture has more details. You can see a better different with the DAILY LUNCH or Lil Rhino card. Like I said I like the elongated vertical card but in GRID layout (want my cards to be straight and sequential) instead on MASONRY ( cards are not straight or sequential)
Got it, thanks!
Here is the solution to fix the image cropping in the Grid layout - Increase size of image container to fix image cropping (Grid layout).
Give it a try and let me know if it helped ![]()
hey @Max the layout is giving me pain again, when it first load it loads 4 columns everything looks good, but when you reload the page sometimes I get 2 or 3 columns (mobile) making everything look so big in the computer. is there a way you guys can add this columns adjustments natively next to the current rows selections. and it does not matter screen size I can always have 4, 5 or 6 columns and 2 or 3 mobile. It’s kind of logical, rows are there
Hi there, @Norton ![]()
Unfortunately, it’s impossible to neatly display more than 1 column on mobile devices. However, we fixed 5 columns to always display on desktop using this CSS code:
@media(min-width: 1280px) {
.eapp-events-calendar-grid-item-container {
width: 20%;
}
}
Please check it out and let me know if everything is fine ![]()
@Max as always a lifesaver! thanks for the fix, so if in the futureI want to manually change it to 3 or 4 columns should I change the min-width or width percentage. when I said to add it native, same way you have rows in the layout tab, thanks again
Hey there, @Norton ![]()
If you’d like to adjust the number of columns in the future, you should change the width percentage in the CSS code from the previous message ![]()





