This should be a quick answer… where is the padding in the green marking coming from?
This is in the Real estate demo project.
I can’t see any padding or margin set up, or max width in the Row, column or Card
Thanks!
This is in the Real estate demo project.
I believe that is the default bootstrap column spacing.
click on the card which is one lower than you are clicked on now and you should be able to adjust from there? you aren’t adjusting the column, you are adjusting the card
Ah I believe so thanks @brad , I can see it in the Design tab here
@baub it seems to be on the column, I should have looked in the design tab not the app structure tab.
But then why does it not work in my own project to adjust the margin and padding in the design tab, am I missing something here? See this video:
2020.11.17 00.42 - 979 - Hermitcrab
If I could just add 15 px padding there it’ll look way better…
If you are using the theme designer you can set the grid gutters there. It is set to 30 px by default.
Keep in mind this will change the gutters globally, not just that instance.
@brad
I guess I’m making a few fundamental mistakes, first time I’m actually trying to improve the design.
-
The gutter width’s aren’t changing - I’m guessing because the element on the page isn’t actually a grid? Perhaps I should set it up differently and put the Card Group in a grid?
-
How do I go about changing the items not globally (I presume I do that in the design tab shown in my video)?
1: You do have it in a grid. You can see the grid … the Grey and White background.
2: Yes, you can try the design panel or maybe even the app connect properties and maybe add a negative margin to the sides of your cards or column. You may need to play around. I have never tried to make an element larger than the grid.
Maybe you could just use one column instead of two and use flex containers with display blocks in it. Set each display block to 50%. That would get rid of the space between cards. Just an idea.
@brad Thanks for helping out and your quick replies!
- Any Idea then why the settings aren’t changing anything?
- I recorded a quick video where I change the settings - nothing in the app connect properties is giving me any spacing. The properties in the design panel are not having any effect whatsoever.
Any idea why they have no effect?
2020.11.17 01.03 - 983 - Watermoccasin
I am not sure how you mean the alternative set up you gave me. But actually my goal is to create space between the cards, not get rid of it.
Sorry for the many follow-up questions, just very confused!
I think it might be a bug - it seems like the attached stylesheet isn’t being loaded.
When I inspect the page I can’t see any of the things I’ve changed in the design panel with the ‘style1’ class in this case:
When using the theme manager you may need to click the upload button (Up Arrow) to apply it.
That doesn’t seem to help. I’m now thinking I might’ve broken my bootstrap integration when I tried to install a theme before.
I’m trying to reset it but get an error message “overlapping ranges are not allowed”
2020.11.17 01.23 - 985 - Towhee
Any idea how to get around that 
?
Hmmm, never encountered that problem myself but this thread might help.
Thank you Brad!
I’ve managed to fix part of the issue!
For any future readers having issues seeing the changes being applied in the Design panel: check if your style file is set to the correct bootstrap file 
@brad Now the changes in the Design panel do take effect. But I am still unable to create a clean gutter, I can set a padding but this also adds spacing on the right hand side:
Any other idea’s on how to get a clean gutter in between the cards?
Take that margin off. You should have a gutter as defined in the theme manager?
@ben Thank you I think that was it, could you have a look?
I have copied your structure but yours was missing the repeat - so I’ve put the repeat on the row level:
And the padding is coming from here
if I then change the Gutter width in the theme manager, it changes the padding
!
That’s what it’s supposed to. Copied from bootstrap 4 docs:
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
@Teodor Thanks for the input, I just now realise I should change my thought process to first check the bootstrap documentation.
Was about to ask you what the card group, card deck, card columns options in wappler are for… but these aren’t created by you guys.
And everything can be found here 