Navigation
Archive / 3 Columns to 2 Columns in responsive design
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • October 11, 2016 at 11:19 am #1211671

    Polaradventures
    Participant

    When resizing the browser window or viewing the page on smaller devices I would like to implement a middle-step, where the page uses a two-column layout for tablet-sized devices.

    It should work like here:
    polaradventures.eu/schiffe/
    There you can see that at one point the layout switches to a two-column layout.

    The same should be achieved here:
    polaradventures.eu/flugexpeditionen/

    October 11, 2016 at 12:53 pm #1211819

    Joao
    Moderator

    Hi There,

    Please add the following code to Appereance > Customizer > Custom > CSS

    @media only screen and (max-width: 979px) and (min-width: 768px) {
.page-id-262 .x-column.x-sm.x-1-3 {
    width: 46%;
 } }

    Hope it helps

    Joao

    October 12, 2016 at 9:16 am #1212962

    Polaradventures
    Participant

    This almost works, but it puts the other column to the right and not the left.
    Please see the screenshot for clarification.

    October 12, 2016 at 1:14 pm #1213348

    Rupok
    Member

    Hi there,

    Let’s update the code a bit :

    @media only screen and (max-width: 979px) and (min-width: 768px) {
.page-id-262 .x-column.x-sm.x-1-3 {
    width: 46%;
 } 

.page-id-262 .x-column.x-sm.x-1-3:last-of-type {
  clear: left;
}
}

    Hope this helps.

    October 13, 2016 at 6:13 am #1214463

    Polaradventures
    Participant

    That’s working, thank you =)!!

    EDIT:
    Now is there a way to have at least two columns per row in that view? There is always on blank column when viewed on that screen size.

    October 13, 2016 at 7:31 am #1214549

    Jade
    Moderator

    Hi there,

    If you want to add another column in mobile view, you can just create a new section then hide the section with three columns on mobile view and show the 4 columns on desktop view.

    You can do so by using the section visibility feature. See screenshot for reference.

    October 16, 2016 at 7:46 am #1218094

    Polaradventures
    Participant

    Thanks this worked after I added:

    @media only screen and (max-width: 979px) and (min-width: 768px) {
.page-id-262 .x-column.x-sm.x-1-4 {
    width: 46%;
 }

    However there is one problem. In one column there is a white space, where there should actually be a column/content. Please see the screenshot.

    This happens multiple times on the page.

    October 16, 2016 at 4:18 pm #1218521

    Rad
    Moderator

    Hi there,

    It’s caused by wrapping when other columns have different heights. It can be solved by setting your columns on same height, or use this CSS,

      @media only screen and (max-width: 979px) and (min-width: 768px) {
.page-id-262 .x-column.x-sm.x-1-4 {
    width: 46%;
} 
.page-id-262 .x-column.x-sm.x-1-4:nth-child(2n+2) {
   clear:right;
}
.page-id-262 .x-column.x-sm.x-1-4:nth-child(2n+1) {
   clear:left;
}
}

    Hope this helps.

    October 17, 2016 at 4:48 am #1219131

    Polaradventures
    Participant

    Thanks this worked =)!!!

    October 17, 2016 at 7:16 am #1219271

    Joao
    Moderator

    Glad to hear it,

    Joao

  • Author
    Posts