Set standard width for card component

Anvil Q&A
#1

Hi,

I am new to anvil and is having a great time building an internal web portal for our company without learning to much about hml and javascript.

I want to increase the standard width for card component to have a wider grid table.

I cant find the width anywhere in the theme.css file, but using Google Chrome inspect I think it is this CSS code:

@media (min-width : 768px) {
.anvil-panel-section-container:not(.full-width-row) { max-width: 1400px; }}

@media (min-width: 992px) {
.anvil-panel-section-container:not(.full-width-row) { max-width: 1400px; }}

It worked when I inserted this code into theme.css but is this the correct “anvil” way of doing it?

Anyone have a better idea? What to do if I want different width one different pages?

width
width.png1346Ă—272 19.1 KB

#2

Hi @jorn - welcome to the Anvil Forum!

What you’re looking for is the full_width_row property - there’s some information in our documentation here.

I hope that helps!

#3

Hi @daviesian,

Thanks a lot!

Is it possible to set the width somewhere between the standard and full width?

#4

For that you’ll want a full_width_row with spacers to lay things out the way you want. Alternatively, you’re right that those CSS rules are the place our “standard” width is defined, so you can certainly change them if you wish.

#5

Great. Thanks a lot!

#6

If you want to set a custom width for a card, you can put it in an XY Panel or a Flow Panel and either set the width in the editor or dynamically in your code. I haven’t tested with other containers but I know it works in an XY Panel and the Flow Panel.

1 Like