[Resolved] Two Column View in Mobile or Tab

[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

[Leo]

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!

[Author]

Posts