Page 1 of 1

question about RESPONSIVE layouts

Posted: 12 Apr 2014, 23:07
by jmz1964
I had previously been using a theme switcher to serve up different, mobile-themes, but now want to try SUFFUSION for mobile too. the only problem i can see so far is that the navigation bar below header does not respond on the mobile size. It stays super wide, while the header image responds:

http://www.james-baker.com/news/

I have a FIXED WIDTH at full size, but even if I change it to FLUID it makes no difference. any tips

Re: question about RESPONSIVE layouts

Posted: 12 Apr 2014, 23:53
by drake
At Suffusion Options -> Layouts -> Responsive Layouts can set different breakpoint resolutions from where Navigation Bars become select lists.
And for sure need to change the widths to fluid for having a responsive layout.

Re: question about RESPONSIVE layouts

Posted: 13 Apr 2014, 10:31
by jmz1964
I have the FLUID setting turned on. But when i look at my site on my mobile, the NAVIGATION BAR (black MENU strip beneath my header) extends way off-screen to the right, and distorts the fluidity of the page. Maybe there is still a setting turned on somewhere? Take a look:

http://www.james-baker.com/news/

Re: question about RESPONSIVE layouts

Posted: 13 Apr 2014, 10:59
by drake
Your navigation bar still look like fixed one of 1000px... Also the footer. At Custom Styles add:

Code: Select all

#nav, #page-footer .col-control {width: 100%;max-width: 1000px;min-width: 0;}

Re: question about RESPONSIVE layouts

Posted: 13 Apr 2014, 11:07
by jmz1964
Thank you. I added the code you provided. The extended nav bar is now gone on mobile, but there is the same amount of white space there (i.e.; possible to scroll to the right, though there is no text/images etc)

Re: question about RESPONSIVE layouts

Posted: 13 Apr 2014, 17:32
by drake
Continue to add at Custom Styles:

Code: Select all

#header-container .col-control {width: 90%;min-width: 0;}

Re: question about RESPONSIVE layouts

Posted: 13 Apr 2014, 17:42
by jmz1964
Oh thank you! How do you find the solutions? I don't even know where to look most of the time

Re: question about RESPONSIVE layouts

Posted: 13 Apr 2014, 17:55
by drake
Inspect Elements... and probably more experience :)

Re: question about RESPONSIVE layouts

Posted: 13 Apr 2014, 18:30
by jmz1964
I really must thank you for all the help you have given me. That tip about SUFFUSION for mobile was great! I often do not know a the things it can do!

By the way, was there something wrong with my site before? Or a bad plugin? Otherwise Why would the extra CSS be needed for my too-wide header?0

Re: question about RESPONSIVE layouts

Posted: 13 Apr 2014, 18:36
by drake
No, I don't know why... maybe because we used a fixed width for sites, sometimes the elements from the above codes remains at fixed widths... The codes just change them to fluid widths. I prefer to not lose time with "why", but I concentrate on "how" :lol: