Add more columns to Blog

Ask the Community Customization
1

Hello -

looking for CSS to edit the amount of columns the blogs can have - defaults are currently capped at 3 - looking to have 5 instead.

2 Likes
3

Hi there, @Billie_Meredith :wave:

Please try to use this code in the Custom CSS field on the Style tab of your widget’s settings and let me know if it helped:

[class*='layout__Grid-sc'] {
  gap: 20px
}

@media(width > 1024px) {
  [class*='layout__Grid-sc'] {
  grid-template-columns: repeat(5, calc(20% - 20px));
}

}

1 Like
5

Hey @Max

This has created five across - however the margins are still the same when i’m looking for edge to edge… see screenshot.

Screenshot 2025-02-04 at 15.14.52
Screenshot 2025-02-04 at 15.14.521920×791 94.3 KB

2 Likes
6

Would you like to increase the image size, so that they’d fill the empty space in the container? Or would you prefer to keep the current dimensions and just to reduce the margins?

1 Like
7

I’m not sure which would be a better fit -

could you show me the difference between both? - do a code of either so I can have a look?

:crossed_fingers:

2 Likes
8

Could you please send me a link to the page where your widget is installed?

1 Like
9

Hello -

It’s on a test page: News — Young Identity

2 Likes
10

Thank you!

I’ll check things with the devs and will get back to you tomorrow :slightly_smiling_face:

2 Likes
11

Hey Mark - any update on the columns?

1 Like
12

Hi there, @Billie_Meredith :wave:

I am so sorry for the delayed response!

This CSS code will enlarge the widget to fill the space in the container:

[class*='widget__Container-sc'] {
  max-width: unset
}

.global-styles,
.fluid-engine:has([class*='elfsight-app']) {
  display: block;
}

And this code removes the empty space in the container:

[class*='widget__Container-sc'] {
  max-width: unset
}

.global-styles,
.fluid-engine:has([class*='elfsight-app']) {
  display: block;
}

[class*='layout__Grid-sc'] {
  gap: 20px
}

[class*='widget__Container-sc'] {
  max-width: unset
}

.global-styles,
.fluid-engine:has([class*='elfsight-app']) {
  display: block;
}

[class*=' featured-card__Container-sc'] {
  max-width: 1080px
}

@media(width > 1024px) {
  [class*='layout__Grid-sc'] {
    grid-auto-flow: column;
    grid-auto-columns: 200px;
  }
}

Test it out and let me know if it helped :slightly_smiling_face:

2 Likes