@KK No the couch logo breaks (As the width is much bigger). I have a solution though, I will come back in a few with it (If it works )

[cheesypoof]

The min-width property was very purposeful. That minimum size was chosen for the sake of reasonableness of implementation. At anything less than that, the challenges to maintaining responsiveness increase significantly. It was a design choice to target phones in landscape orientation, and not necessarily portrait, if their width was less than 480.

@Cheesypoof I can understand that, designing such intricate details that the admin panel requires is very difficult below those widths. However, I personally only use my device in portrait mode (Landscape keyboard is not my area of skill, lol). While I can see why you made that choice, I think perhaps we could offer a portrait version of the theme for those who wish to use the theme in that regard (Or have clients who demand it). Not everybody wishes to create their own or redesign the panel.

With that said, the easiest fix is to remove the logo at widths less than 480px (And portrait). Though, like I said, I would recommend this as a sort of "Mobile-first theme", rather than a permanent implementation, I can see there being other portrait design issues that cannot yet be seen until this one is fixed. and I haven't even tried a repeatable region on a mobile device yet (Though I know there is a new addon being developed).

If you wish to apply the fix, I would recommend using a media query to hide the logo on smaller portrait devices.

We already have a script that runs on mobile devices !
Congratulations KK Many many thanks!

I HAVE A QUESTION/PROPOSAL
Let this site have the opportunity to donate

For example,
I want to make donations to support the COUCH!, I believe there are many others

KK please do so!

Regards

Could you please test and let me know how the changes you suggested affect the layout when the default Couch logo is in place?

When you get down to the smallest screen sizes, then the buttons overlap the logo. You can test this on the desktop by resizing the window.

This theme seems to be somewhat lacking when it comes to the smallest screen sizes. The min-width:480px style makes it overflow the screen on most smartphones. I know it's tricky, but I think that a breakpoint below 480px is needed for this theme. The smallest Apple phones have a device-width of 320px, the big ones are 375px. Android is all over the map, but tends to fall in the 360-400px range.

I added the following media query to my custom style sheet for smartphone screens. It's very preliminary. I haven't had time to give this too much attention yet. My process was to simply search for "min-width:4" and override those styles. I've done only minimal testing on the desktop and with a large-ish phone screen.

Code: Select all

@media(max-width:480px){
    body{min-width:auto;}
    #settings-panel>.panel-body>.field>.dropdown{min-width:auto;}
    .dropdown{width:auto;min-width:auto;}
    .panel-body>.field>.dropdown{min-width:auto;}
    .col-title,.col-original-page{min-width:auto;}

    #simple-page{min-width:auto;}
    #simple-wrap{width:94%;}
}

Like I said, the buttons overlap the logo below about 380px. Personally, I'm willing to tolerate that compromise. There could well be other problems I haven't encountered yet.

EDIT: Sorry, I was unaware of the discussion that took place between @KK's question and now. Just missed seeing it. Nonetheless, I think my contribution still fits within the context of the discussion. -Tim

[cheesypoof]

Additional efforts have been made to accommodate smaller viewport widths (down to 360px). See the latest repository files.