Forum Support

Shape 5
March 28, 2024, 03:43:51 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Horizontal Accordion Menu On Small Screen  (Read 1218 times)
sidearm23
Jr. Member
**
Offline Offline

Posts: 15



« on: January 28, 2015, 08:32:46 AM »

Hi,
  I have the horizontal menu on my site and it look great on a computer and tablet, but on my phone in portrait it goes to one column which works fine.   However, in landscape on my phone it looks cut off and smashed together because it is trying to display all 4 sections.  I can't seem to find the setting that let's the s5_ha_# sections be altered so that they show up in one column or two columns etc.  I assume there is such a setting because in your demo a landscape phone shows up with one larger section in one column.  Any assistance would be great.

Also having a slightly similar issue with the section underneath with the circle callouts...i have 5 of those sections, and when the are resized to fit a smaller screen they show up a 2, 1, 2 but the 1 is on the right hand side...so it just looks a bit odd.  Any way to change that easily?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: January 28, 2015, 10:03:33 PM »

Hello,

Please post a URL where this occurs
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
sidearm23
Jr. Member
**
Offline Offline

Posts: 15



« Reply #2 on: January 29, 2015, 04:33:02 PM »

runcobrothers.com ....i took out one of the blocks and it looks better..but i would prefer to have 5 and have them resize on a landscape phone setup....thanks
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #3 on: January 30, 2015, 01:54:12 PM »

You can add some CSS to the s5_responsive.css file so that the font size is decreased at the resolution the text bumps down so as to allow it not to bump down before all the other 3 module areas.
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
sidearm23
Jr. Member
**
Offline Offline

Posts: 15



« Reply #4 on: January 30, 2015, 02:09:36 PM »

Ok i could try that...how would i get landscape to look like it does in portrait on a phone...having just one block on top of each other....on you demo of zoka if you go to the landscape phone view it shows a rectangle shaped box on top of another and so on...that is what my goal would be...
Thanks again
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: January 31, 2015, 12:13:40 AM »

Hello,

In the Template Manager under Layout you can adjust the Responsive Settings for the Top_Row1 where this module is published. You would want to set it to go to a single column at a higher resolutions meaning they will stack sooner. They will always appear wider when landscape as the modules scale responsively but this will cause the entire row to stack at any resolutions necessary.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
sidearm23
Jr. Member
**
Offline Offline

Posts: 15



« Reply #6 on: February 10, 2015, 12:30:19 PM »

Unfortunately the layout section does not seem to cause a response....i changes TOP ROW1 to single column at 1100px and no difference, tried several other and see no change.  It is published to that section so I don't understand why it is not making a difference.  When I change other sections it seems to work fine.
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #7 on: February 11, 2015, 08:38:29 PM »

Hello,

To change when the module collapses all the sections into one single column you would need to edit the CSS here:

modules\mod_s5_horizontal_accordion\css\s5_horizontal_accordion2.css

Notice:


Code:
@media screen and (max-width: 700px){

.horzaccordion {
height:auto !important;}

.horzaccordion li {
float: none !important;
width: 100% !important;}

}

This is what sets when the columns collapse into one.
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.