Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] Sequence of columns on mobile


  #1  
Old Mar 21, 2015, 11:14 AM
ralfsteck
 
54 posts · Oct 2009
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?
Attached Files
File Type: txt MontezumaExp.txt (73.4 KB, 459 views)
  #2  
Old Mar 22, 2015, 06:08 AM
ralfsteck
 
54 posts · Oct 2009
Oh, what I wanted to say, I tried with .content and #content, nothing worked.
  #3  
Old Mar 22, 2015, 02:15 PM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Mar 22, 2015, 04:36 PM
ralfsteck
 
54 posts · Oct 2009
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;
    }
}

Last edited by ralfsteck; Mar 24, 2015 at 03:23 AM.
  #5  
Old Mar 26, 2015, 06:05 AM
ralfsteck
 
54 posts · Oct 2009
I can't see how I mark this thread solved, but I'm totally content with my solution. Thanks for the help.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Mobile dropdown nav menu appearing in non-mobile view header Michael4fm Montezuma Theme 4 Aug 19, 2014 09:56 PM
How do I get the Menu 2 categories i the sequence i want. bsprowl Page & Category Menu Bars 3 Apr 9, 2012 06:30 AM
page sequence wereldbol Page & Category Menu Bars 4 Jan 17, 2010 09:21 AM


All times are GMT -6. The time now is 07:15 PM.


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