• Resolved chappers1972

    (@chappers1972)


    Hi Tom,

    Using a 3 column block, I’d like to show 3 columns on desktop, 2 on tablet and 1 on mobile.

    Is this possible?

    Thanks,
    Richard.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Twentig

    (@twentig)

    Hi Richard,

    What you can do is add a CSS class to the Columns block and add some custom CSS inside the Customizer. To do so:

    1. Select the Columns blocks.
    2. Open the sidebar settings and under Additional CSS Class(es), add the new class e.g. cols-hide
    3. Then open the Customizer, and inside Additional CSS, paste the following code.
    4. @media (max-width: 1023px) {
      	.cols-hide .wp-block-column:last-child {
      		display: none;
      	}
      }
      
      @media (max-width: 651px) {
      	.cols-hide .wp-block-column:nth-child(2) {
      		display: none;
      	}
      }

      Have a nice day,
      Tom

    Thread Starter chappers1972

    (@chappers1972)

    Hi Tom,

    Worked perfectly.

    You’re the best!

    Thanks,
    Richard.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Hiding Columns on Tablet and Mobile’ is closed to new replies.