[SOLVED] Unterschiedliche Umbruchgrößen Desktop -> Mobile

Hallo,
ich musste leider feststellen , dass das Template jp classic bei den Modulen unterschiedliche Umbruchgrößen Desktop -> mobile hat.

Beispiel:
Modulpos. Banner hat uk-hidden-small zugewiesen. Ich habe Modulpos. Top A uk-hidden-large zugewiesen.
Dies ergibt:
Großer Desktop: Modul Banner wird angezeigt, Top A nicht = Passt!
Mittlerer Bildschirm: Modul Banner UND Top A wird angezeigt = Passt nicht!
Smartphone: Modul Banner wird nicht angezeigt, Top A schon = Passt!
Also gerade in den Bildschirmzwischengrößen ist hier kein klarer Schnitt zwischen css uk-hidden-small und uk-hidden-large.

Deshalb meine Frage:
Wo kann ich die Einstellungen von css-class „uk-hidden-small“ und css-class „uk-hidden-large“ einsehen bzw. verändern?
Grüße vom Christian

Hallo,
die top-a ect pp Module können sie in den Template settings konfigurieren, siehe Bild

Hallo,

hab hier alle Möglichkeiten durchprobiert, da ändert sich gar nichts!

Meine Lösung hierzu erst mal zum Problem, wie Module in mobile angezeigt werden und am Desktop nicht:
/layouts/theme.php

Code alt für z.B. top-a
<?php if ($this->count('top-a')) : ?>
<section class="<?php echo $grid_classes; echo $display_classes; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this->render('top-a', array('layout'=>$this->get('grid.top-a.layout'))); ?></section>
<?php endif; ?>

Neuer Code für top-a:
<div class="uk-hidden-large">
<?php if ($this->count('top-a')) : ?>
<section class="<?php echo $grid_classes; echo $display_classes; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this->render('top-a', array('layout'=>$this->get('grid.top-a.layout'))); ?></section>
<?php endif; ?>
</div>

-> d. h. ich umschließe top-a mit einem div, das die Anweisung hat, bei einem großen Bildschirm nicht angezeigt zu werden -> class="uk-hidden-large"

WICHTIG dabei: Das ganze für sich gut Dokumentieren, da bei einem Template-Update dies später vielleicht mal wieder überschrieben werden könnte und somit erneut neu eingestellt werden muss!
UND: Ich habe bei mir dies so in Verwendung, dass der Bannerinhalt für den Desktop ist, und top-a-Inhalt für die mobile-Version. Aber Vorsicht im Bezug SEO duplicate content. In beiden sollte z.B. keine h1 sein, hier z.B. im Banner <h1>Überschrift</h1> und in top-a <p class="uk-h1">Überschrift</p>.

Und dann noch meine Lösung, ab wann mobile oder Desktop:

Folgenden Code in die custom.css kopieren:

.uk-display-inline-block{display:inline-block!important;max-width:100%}@media (min-width:770px){.uk-visible-small{display:none!important}.uk-visible-medium{display:none!important}.uk-hidden-large{display:none!important}}@media (min-width:768px) and (max-width:769px){.uk-visible-small{display:none!important}.uk-visible-large{display:none!important}.uk-hidden-medium{display:none!important}}@media (max-width:767px){.uk-visible-medium{display:none!important}.uk-visible-large{display:none!important}.uk-hidden-small{display:none!important}}

Dieser wird dann dann mit min-width und max-width angepasst entsprechend. Da muss man halt noch etwas ausprobieren. Da der Code dann in der custom.css ist, dürfte ein Template-Update nichts ausmachen, außer der "Basiscode" wird vom Hersteller grundstätzlich geändert. Deshalb auch hier meine Empfehlung: Dokumentieren!

Beide Lösungen sind bei mir ( www.band-regensburg.de ) erfolgreich im Einsatz (Jommla 3.9.2).

Wünsche viel Erfolg!

Grüße vom Christian

Problem solved.