[Resolved] Two Column View in Mobile or Tab

Home Forums Support [Resolved] Two Column View in Mobile or Tab

Home Forums Support Two Column View in Mobile or Tab

  • This topic has 1 reply, 2 voices, and was last updated 4 years ago by Leo.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #832965
    purnima banik

    Hi Tom,

    I want to achieve a two-column view on the mobile or smaller screen. Please help me to achieve that. Code & CSS used is as under –
    .col-top{
    width: 305px;
    height: 700px;
    margin:0px 15px;
    border:1px solid #3B84EE;
    float: left;
    bottom: 2px;

    }
    .col-bottom{
    width: 305px;
    margin:0px 15px;
    height: 700px;
    border:1px solid #3B84EE;
    float: left;
    }

    .col-header{
    background-color: #3B84EE;
    font-weight:bold;
    }
    .col-header h4{
    text-align: center;
    color: white;
    font-size: 20px;
    }

    Thank You
    Purnima

    #833143
    Leo
    Staff
    Customer Support

    Hi there,

    It doesn’t look like you have enough room on mobile to have 2 columns without squeezing the content.

    Also the way you’ve set it up isn’t using columns – they are just fixed width <div> essentially.

    I would recommend try to do it using flexbox columns like Tom’s example here:
    https://generatepress.com/forums/topic/dividing-header-or-top-bar-into-segments/#post-818284

    Then you can set it to 50% on the last CSS to show 2 columns on mobile:

    @media (max-width: 768px) {
        .header-section > div {
            width: 100%;
        }
    }

    Please keep in mind that this is support forum for GeneratePress so the questions should be related to the theme.

    Thanks!

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