Archived topic

Two Column View in Mobile or Tab

1 reply · Started by purnima banik on March 8, 2019

Viewing posts 1–2 of 2

March 8, 2019 at 7:41 am #832965

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

March 8, 2019 at 9:59 am #833143

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!

This archived topic is closed to new replies.

Start building better websites today.