End of Support for Joomla 3 - Forum closed

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

  • chli
  • chli's Avatar Topic Author
  • Visitor
  • Visitor
  • Thank you received: 0

Unterschiedliche Umbruchgrößen Desktop -> Mobile was created by chli

Posted 5 years 9 months ago #22690
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
by chli

Please Log in or Create an account to join the conversation.

Replied by joomlaplates on topic Unterschiedliche Umbruchgrößen Desktop -> Mobile

Posted 5 years 9 months ago #22697
Hallo,
die top-a ect pp Module können sie in den Template settings konfigurieren, siehe Bild

Attachment grid-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20.jpg not found

Attachments:

Please Log in or Create an account to join the conversation.

  • chli
  • chli's Avatar Topic Author
  • Visitor
  • Visitor
  • Thank you received: 0

Replied by chli on topic Unterschiedliche Umbruchgrößen Desktop -> Mobile

Posted 5 years 9 months ago #22740
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
Last Edit:5 years 9 months ago by chli
Last edit: 5 years 9 months ago by chli.

Please Log in or Create an account to join the conversation.

  • chli
  • chli's Avatar Topic Author
  • Visitor
  • Visitor
  • Thank you received: 0

Replied by chli on topic [SOLVED] Unterschiedliche Umbruchgrößen Desktop -> Mobile

Posted 5 years 9 months ago #22741
Problem solved.
by chli

Please Log in or Create an account to join the conversation.

Moderators: joomlaplates

Installations-Service

Don´t waste your time, we install your purchased Template
with the "Demo Content" within the next 24 hours.

Buy Now - 59€

Joomlaplates/Theme-Point is not affiliated with or endorsed by Open Source Matters or the Joomla! Project

Copyright © 2024 JoomlaPlates | Professional Joomla Templates with Uikit 3

Disclaimer & Privacy | License