Support » Theme: Koji » 3 columns across all devices?

  • Tiago

    (@iam3ple)


    Hi,

    How can I make my website’s home page display 3 columns on all devices (at least 1200px or so and below that, because super large screens can have 4, 5, etc)? I’m trying to achieve an Instagram kinda look and one mobile it’s only showing 1 and on tablet 2, I guess). I was able to make some changes, but can’t seem to find a way to change the number of columns.

    https://www.iamdannywyatt.com

    Also, I wanted to remove the extra bottom margin from each post preview, but all the changes I’ve made didn’t work.

    Thank you! 🙂

    • This topic was modified 5 months ago by Tiago.
    • This topic was modified 5 months ago by Tiago.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Anders Norén

    (@anlino)

    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

    Thread Starter Tiago

    (@iam3ple)

    @anlino it worked like a charm! You’re the man! 🙂

    One more question (hope it’s ok to use this thread, if not, let me know and I will start a new one):

    How can I reduce the padding (or margin) on mobile only around the whole website?
    I want those 3 columns of posts, but with the current padding/margin (especially the left and right) each post becomes too small and I wanted to use a bit more space for each.

    Really appreciate it 🙂

    Theme Author Anders Norén

    (@anlino)

    @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 );
        }
    }
    Thread Starter Tiago

    (@iam3ple)

    Thanks again @anlino for your quick an helpful tip. It worked as expected 🙂

    Can you clarify what you mean by wide and full alignment?
    I Googled those terms and I got to this page:
    https://www.billerickson.net/full-and-wide-alignment-in-gutenberg/

    It mentions Gutenberg, but I’m using the classic editor, so I’m not sure if that applies to me. I never really enjoyed the new editor, to be honest… Maybe I don’t use WordPress enough and not that deep that justifies getting used to it, I guess… 😉

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.