Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   [SOLVED] Sequence of columns on mobile (http://forum.bytesforall.com/showthread.php?t=23118)

ralfsteck Mar 21, 2015 11:14 AM
[SOLVED] Sequence of columns on mobile
 
1 Attachment(s)
Hi all,

I have a layout with right and left sidebar. The problem starts when the screen gets smaller, theen the left sidebar is under the page menu selector, then the center column, then the right one. I'd like to have it like

Header
Center column
SidebarLinks (left sidebar)
SidebarRechts (right sidebar)

I tried to put this in layout.css, but nothing happens:

Code:
@media screen and (max-width: 767px) {   
        #content {
    width:        100%;
    }
    #SidebarLinks {       
    width:        100%;
    }
    #SidebarRechts {
    width:        100%;
     
    }
}
any advice?

ralfsteck Mar 22, 2015 06:08 AM
Oh, what I wanted to say, I tried with .content and #content, nothing worked.

juggledad Mar 22, 2015 02:15 PM
To do this you are going to have to write a jquery to do this. Here a link to an example you can play with

ralfsteck Mar 22, 2015 04:36 PM
I found a weird but working solution. I defined another sidebar SideBarLinksM below the column, that has the same widgets as SideBarLinks, and make that invisible. I then toggle the sidebars with the max-width selector.

Here is the CSS:

Code:
/* A sidebar */
#SidebarLinks { 
        padding:                                20 0px;
          background:                        #ffffff;
}
#SidebarLinksM { 
        padding:                                20 0px;
          background:                        #ffffff;
    display:                                none;
}

/* A sidebar */
#SidebarRechts { 
        padding:                                20 0px;
    background:                        #ffffff;
}       

#SidebarHeaderLinks { 
    padding:                                0 0px;
    background:                        #ffffff;
}
#SidebarHeaderMitte { 
    padding:                                0 0px;
          background:                        #ffffff;
}
#SidebarHeaderRechts { 
    padding:                                0 0px;
          background:                        #ffffff;
}

 
@media only screen and (max-width: 959px) {
    #content {
    width:70%;
    margin-left:0;
    float:        left;
    }
    #SidebarLinks {
    width: 30%; 
    float:        right;
  }
    #SidebarRechts {       
    width: 20%;
    float:        right;
    }
}

@media screen and (max-width: 767px) {   
        #content {
    width:        100%;
    float:        left;
    }
    #SidebarLinks {       
    display: none;
    }
    #SidebarLinksM {       
    display: block;
        width:        50%;
    float:        left;
    }
    #SidebarRechts {
        width:        50%;
    float:        right;
    }
}

ralfsteck Mar 26, 2015 06:05 AM
I can't see how I mark this thread solved, but I'm totally content with my solution. Thanks for the help.


All times are GMT -6. The time now is 05:50 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.