CSS Bootstrap how to show more columns in Masonry Grid Layout

  • Unknown's avatar
    maximetinu · Member ·

    I know little about CSS, much less about Bootstrap framework. In the main page, my theme (Jax) shows 3 post previews columns by default. It is responsive and shows only one of them when the current device is a mobile phone, for example.

    With only 3 columns, it still remains a lot of unused space, so to set it to 4 columns I change this in bootstrap.css:

    .col-md-4 {
    width: 25%; /*(instead of 33,33%)*/
  }

    It worked in desktop pc and laptop, but now, in mobile devices, it has become completely unformatted, showing a letter by row in one column, like this:
    Mobile screen picture

    After, in theme’s css file (template.css). I’ve noticed it doesn’t use .col-xs, sm or lg classes, only .col-md-* classes. I don’t know what code section I have to show to you, I’m modifying bootstrap.css code percentages, but I know the problem is in theme template css.

    Anyone can help me please? Thanks a lot.

  • kathrynwp · Staff ·

    This forum is for folks hosted here on WordPress.com, but it sounds like your site is self-hosted.

    You can try getting help from the theme developer directly or if you’re using Jax Lite they have a forum here:

    https://wordpress.org/support/theme/jax-lite

    You’ll need a free WordPress.org account to post – if you don’t already have one, you can register here:

    https://wordpress.org/support/register.php

    Be sure to provide a link to your site when you post so people can help you more easily.

  • The topic ‘CSS Bootstrap how to show more columns in Masonry Grid Layout’ is closed to new replies.