responsive layout

General questions on how to do things using Photonic.

This forum is not actively monitored. For support topics please post them to https://wordpress.org/support/plugin/photonic/.
Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: responsive layout

Post by Colin » 04 Apr 2016, 10:51

You are missing the point and at this stage I am not responding any more to this thread.

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 04 Apr 2016, 11:31

It's possible that I am missing the point, but maybe someone else can explain to me why the maximum width does apply and the minimum width don't?

I can't see why it wouldn't be possible to have responsive layouts in combination with a "fixed" minimum width. It's most likely just a matter of programming...

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

Re: responsive layout

Post by drake » 04 Apr 2016, 17:44

@lensv - you can be one "in the crew" also. Because we are volunteers here, we are developers just like you, but we choose to spare some of our time to answer here trying to help other Suffusion users.

Indeed, Colin is right. Just because something not work as you like is not necessarily a bug. If you press the brake in a car wanting to accelerate, the car will stop... It is a bug of the car because don't read your mind? Or you just need to press the right pedal?

Like here. A responsive layout need to adapt to any mobile device. By fixing the minimum width at 600 px, the layout is just fluid, but not responsive because cannot be adapted to devices under this resolution. So, Suffusion have 3 kind of layouts:
- fixed - is not adapted to any device - it stay at the dimension you choose everywhere. On mobiles is zoomed to fit and the users need to pinch the screen for seeing the content.
- fluid - it is adapted between minimum width and maximum width settled in options. On devices between these, act as responsive. But below minimum width acting as fixed to minimum width. IS NOT RESPONSIVE because don't take care of devices below minimum width.
- responsive - no matter of the device the layout will be adapted. Technically this is equivalent by considering a minimum width of 0 because only then the layout can be adapted to any screen width.

So, if you want a minimum width of 600px, you practically are in the second case - you need a fluid site, but not a responsive one because under 600 px the site is not responsive.

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 05 Apr 2016, 03:17

Thanks for the clarification drake!

The main reason for asuming that the fluid width settings works well together with responsive layouts was your aricle (that was previously mentioned):

http://www.drafie-design.nl/set-suffusi ... esponsive/

The second step there signals that fluid width settings are actually necessary for the responsive layouts to take effect, but I guess that I got that wrong? Anyway, it would be neat if at least the .tinynav could be applied to a fluid width design (if not the responsive layouts can be made to not schrink below a minium width value).

Finally, don't get me wrong, any of you. I appreciate all the help that I get here. I also do believe that Suffusion is a great theme. But still, there may be room for improvement. Maybe I should have filed a feature request instead of a bug report. I appologize for that mistake :oops:

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 07 Apr 2016, 08:18

@drake (or anyone)!

Would it be possible by custom CSS to get the .tinynav work with a standard fluid width design? It's probably the only component from the responsive layouts that I'll miss if I choose this layout style.

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

Re: responsive layout

Post by drake » 07 Apr 2016, 20:05

I'm afraid no, is not possible only with CSS. You can try to include yourself tinynav.js (http://tinynav.com/) for desired resolution. For how to add your own js on the site can see more posts on my site, like this one: http://www.drafie-design.nl/adding-jque ... suffusion/

But this need more testing because some of the codes can be already included, as Suffusion use them for responsive layout.

Instead you should try to use the responsive layout and can try to add your minimum width with !important directive, like this:

Code: Select all

#header-container, #header-container .col-control, #nav-top, #nav-top .col-control, #nav, #nav .col-control, #wrapper, #page-footer, #page-footer .col-control {min-width:600px !important;}
Or maybe you can adapt all elements from site to be completely responsive. By eg, you can create an image which contain logo+description+any other elements needed in header, then use that image as header foreground. Then the header will be resized automatically to follow the screen resolution of the visitor.

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 08 Apr 2016, 03:38

Alright!

That code with the !important flag seems to do the job... almost. If I look at the site in an iPhone and navigate to one of the pages in the menu it will be presented in a "zoomed in" view. Can that be avoided?

Btw. is the .tinynav the only option when it comes to the "mobile" menu in the Suffusion theme? I kind of like the one that is used on this site better...

http://www.westrens.se

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

Re: responsive layout

Post by drake » 08 Apr 2016, 16:53

I can't see which jQuery plugin is used on that site, but of course you can include any of existent jQuery plugin for responsive navigation.

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 09 Apr 2016, 09:19

Any idea of why the pages are zoomed in when .tinynav menu is used?

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 11 Apr 2016, 08:01

I tried the same with Chrome (for iOS) and that's even worse... Same zoomed in view and in this browser there is no way to navigate out from the menu (no "go" button)... :o

Locked