Template: Flexible
Joomla-Version 3.4.8

Hallo, folgendes Problem:

ich nutze euer Flexible-Template, dass ja grundsätzlich das Responsive-Design unterstützt.

Nun ist mir leider erst jetzt aufgefallen, dass bei der Darstellung im Internetbrowser zwischen der Auflösung von 1.025 bis 1.099 Pixeln bei Verwendung von Layout Style 5 (Menüposition in der Sidebar) der Content rechts weit nach unten geschoben wird (siehe Sreenshots).

Erst unter 1.024 Pixel wird das Responive-Design geladen. Und erst ab 1.100 Pixeln wird der Content, bzw. die weiteren Modulpositionen wie gewünscht rechts oben angezeigt.
Ich benötige da dringend eine Lösung, da z.B. auf dem Surface von Microsoft nun rechts leerer Inhalt dargestellt wird, der erst durch runter scrollen sichtbar wird.

Hallo, bitte tragen sie folgenden Code in ihre css/custom.css ein

#jp-right {
width: 780px;
}

Hallo vielen Dank, es hat geholfen, wenn ich jetzt ganz langsam den browser in der breite vergrößere oder verkleinere gibt es keinen punkt mehr, an dem der contentinhalt nach unten verschoben wird.

aber noch ein problem:

Da ja die linke Sidebar in der Responsive-Ansicht nicht dargestellt wird (was ok ist), werden ja auch keine dort befindlichen Module dargestellt. Unter Verwendung des Modulklassensuffixes "hidden-desktop" habe ich mir ein neues Modul angelegt, das dann unter der Mobil-Ansicht an der Position bottom-b angezeigt wird.
Dies klappt z.B. am Iphone 5s hervorragend.
An meinem Mini-Ipad z.B. wird das Modul nur in der Portrait-Haltung angezeigt. In der Landscape-Ansicht verschwindet es allerdings, obwohl wir uns ja immer noch im Responsive-View befinden.

Gibt's da eine Lösung? Sind die Breakpoints falsch? Bin mit meinem bescheidenen Latein am Ende.

(Zum Test: www.doratec.de )

Hallo,
responsive hat nichts mit den mobilen Geräten zu tun!

Die jeweils angezeigte Größe ( hidden-desktop ect pp.) wird über die media queries in der css gesteuert. Diese können von ihnen auch angepasst werden!
developer.mozilla.org/en-US/docs/Web/CSS.../Using_media_queries

/* Responsive Utility Classes

---

*/
.hidden-desktop { display: none; }
/* Only Phones */
@media (max-width: 767px) {
.hidden-desktop { display: block; }
.hidden-phone { display: none; }
}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {
.hidden-desktop { display: block; }
.hidden-tablet { display: none; }
}