Okay
  Public Ticket #1301204
Especify number of columns on mobile layout
Closed

Comments

  • Karina Streliaev started the conversation

    Hello, on the full screen version of my site I'm using a 3 column layout.

    When opened in medium size screens (tables, small laptops) it automatic changes to 1 (one) column layout, but it would look better it it use 2 (two) columns instead. Is there a way to set the number of columns for different size screens?

    Something like:
    Big screens (desktop, big tablets) - 3 columns
    Medium screens (tablets, small laptops, big phones) - 2 columns
    Small screens ("normal" phones) - 1 column

    Just as a heads up, I know that when I use a 4 column layout on the full screen version of the site, on medium size screens it shows a 2 column layout. But I'm having a alignment problem with some elements (because I my text needs to be very different in length to one element to an other). 

    Thanks once again.

  •  361
    Support Agent replied

    Hi Karina,

    Please try adding the code below to Custom CSS field. The first code is for medium devices, and the second one is for mobile screens. Please make further adjustments according to your needs.

    @media (min-width: 481px) and (max-width: 991) {
     .col-ms-12 {
        width: 50%;
        float: right;
    }
    }
    @media screen and (max-width: 480px) {
     .col-ms-12 {
        width: 100%;
        float: none;
    }
    }

    Let us know if you need additional help.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!