Why is it it cut off at the top of the thumbnail on the blog site?
- it’s strange because the top few rows have their gallery item thumbnails cut off, but the gallery item thumbnails lower on the page do not have this issue. what is the cause of this?
Why is it three columns on the blog site?
Why does the gallery display differently on articles within the blog compared to the blog itself? And how can i fix this to make it look the same? For example, the optimystics.io/publicgoodsgames doesn’t show the full width of the Respect Game or Cagendas articles (as you can see in the second screenshot below). Once he works it out, then will this be resolved?
As a general question, when you apply custom CSS to a page or a database, then does this custom CSS also apply to all child pages within that page?
- this is helpful to know for
Bonus: Is there any easy way to provide the viewer with the option to select how many columns that they want to see?
Hi, I’m trying to figure out how to make a gallery display with two columns wide. I asked Cam about this a couple months ago and he provided some code which worked well at the time, but it doesn’t seem to be working now and I’d greatly appreciate your help to figure out why.
As you can see in the pictures below, there is a bit of CSS code that should change the amount of columns shown in a database. I think that I should be able to change the amount of columns by changing the number 2 to something like 1 or 3, but nothing is happening when I do this. For example, I’ve made sure that both the global site code and the specific page code shown in the screenshot have the number 2 but the page is still showing just one column for the database. I tried deleting the code for the page and that also didn’t enable two columns.
On the other hand, many of the other pages on this site show 2 columns by default and don’t switch to more or less columns if I change this CSS code on the global site settings. So I can’t figure out how to add an second column on the first page or how to remove the second column from the other pages. These specific pages have no custom code other than the site-wide code, so I don’t understand why these pages show two columns and the first page only shows one column even when I delete all of the code in the first page.
Here is the CSS code where I’m trying to change the amount of columns:
.notion-collection-gallery.large { grid-template-columns: 2fr !important; /* make the gallery one column wide */ }
You can see the Blog page where it’s showing only on column Optimystics.io/blog and at this notion page: https://edencreators.notion.site/Optimystics-Blog-6cf34bfe6f4149a1b97f450d962730dc?pvs=4
You can see an example of another page where you can see multiple columns in the middle of Optimystics.io/tools and on this notion page: https://edencreators.notion.site/Optimystics-Tools-369941be584c452aac7ce45623b92d06?pvs=4
I’d really like to be able to understand this better so that I can easily choose between having 2 column or 1 column databases on each page.
Can you please help me figure out how to adjust the CSS code to actually change it to show two columns or one column for the database?
Hey Cam, thank you. Hope all is well.
The page where it’s showing only on column can be found at http://Optimystics.io/blog and at this notion page: https://edencreators.notion.site/Optimystics-Blog-6cf34bfe6f4149a1b97f450d962730dc?pvs=4
The last two screenshots shows example of other pages on the site where you can see multiple columns:
- The last screenshot is at http://Optimystics.io/tools and on this notion page: https://edencreators.notion.site/Optimystics-Tools-369941be584c452aac7ce45623b92d06?pvs=4.
- The second to last screenshot is at https://optimystics.io/respectgame and can be found at https://edencreators.notion.site/Respect-Game-97fc60fcf6944c3095df07a64e86b481?pvs=4.
In the screenshots, the tools page is scrolled halfway down and the respect game page is scrolled to the bottom to show the databases.