Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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
 
55 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, 1684 views)
  #2  
Old Mar 22, 2015, 06:08 AM
ralfsteck
 
55 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,765 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
 
55 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
 
55 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 12:56 AM.


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