Issue with Masonry layout

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

Hello is it possible to have the Events cards on grid from square to rectangle? in Masonry you have it like that, but in masonry looks weird different shapes uneven rectangles and no sequential dates. Also a way no only to select rows, also if I want 3 or 4 columns .

Grid Version

Masonry Version

Hi there, @Norton :waving_hand:

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 :wink:

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 :waving_hand:

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 :wink:

@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 :waving_hand:

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 :slightly_smiling_face: