question about RESPONSIVE layouts

Reports about issues that you encounter in Suffusion. This forum is closed with effect from February 2019. Please post future requests on https://github.com/sayontan/suffusion.
Forum rules
This forum is being officially closed with effect from 3rd February 2019. Future support requests can be posted on the GitHub page at https://github.com/sayontan/suffusion/issues.
Locked
jmz1964
Posts: 33
Joined: 28 Nov 2010, 09:43

question about RESPONSIVE layouts

Post by jmz1964 » 12 Apr 2014, 23:07

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

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: question about RESPONSIVE layouts

Post by drake » 12 Apr 2014, 23:53

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.

jmz1964
Posts: 33
Joined: 28 Nov 2010, 09:43

Re: question about RESPONSIVE layouts

Post by jmz1964 » 13 Apr 2014, 10:31

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/

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: question about RESPONSIVE layouts

Post by drake » 13 Apr 2014, 10:59

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;}

jmz1964
Posts: 33
Joined: 28 Nov 2010, 09:43

Re: question about RESPONSIVE layouts

Post by jmz1964 » 13 Apr 2014, 11:07

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)

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: question about RESPONSIVE layouts

Post by drake » 13 Apr 2014, 17:32

Continue to add at Custom Styles:

Code: Select all

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

jmz1964
Posts: 33
Joined: 28 Nov 2010, 09:43

Re: question about RESPONSIVE layouts

Post by jmz1964 » 13 Apr 2014, 17:42

Oh thank you! How do you find the solutions? I don't even know where to look most of the time

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: question about RESPONSIVE layouts

Post by drake » 13 Apr 2014, 17:55

Inspect Elements... and probably more experience :)

jmz1964
Posts: 33
Joined: 28 Nov 2010, 09:43

Re: question about RESPONSIVE layouts

Post by jmz1964 » 13 Apr 2014, 18:30

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

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: question about RESPONSIVE layouts

Post by drake » 13 Apr 2014, 18:36

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:

Locked