3 columns across all devices?

Hi @iam3ple,

Go to Appearance → Customize → Additional CSS (the menu labels might be different in your language) and add the code below:

.grid-sizer, .preview { width: 33.33% !important; }

That will set the grid to have three columns on all screen sizes. If you want to modify it on larger screen sizes, you’ll need to add media queries as well, like this:

@media ( min-width: 1200px ) { .grid-sizer, .preview { width: 25% !important; } }

That line will set it to four columns above 1200px. Add more lines with a higher pixel value and lower percentage value to change the number of columns on larger screens.

Let me know if that does it.

Edit: Oh, and this will remove the bottom margin:

.preview { margin-bottom: 0 !important; }

— Anders

• This reply was modified 2 years, 11 months ago by Anders Norén.

@iam3ple Happy to hear it! Changing the width of the content area can be pretty complicated, since the positioning of blocks set to the wide and full alignment are based on the default widths. However, if you don’t use blocks with the wide or full alignments, the following should do it:

@media ( max-width: 600px ) {
    .section-inner {
        width: calc( 100% - 4rem );
    }
}