[SOLVED] Jommla ICE Position "abolute" für Tablet verstecke

Hallo,
habe ein Problem mit der Modulposition ABSOLUTE beim template ICE. Habe auf dieser Position ein JPG mit einer Breite von 100px hinterlegt . Auf dem Tablet wird es leider nicht ausgeblendet und überdeckt teilweise den Header und die Navigation. Bis jetzt habe ich es über eine Media Queries - Anweisung in der custom.css nicht geschafft, dass die Position bei tablet ausgeblendet wird. Entweder sie wird ausgeblendet, dann verschwindet aber auch der Menü-Toggle.

Vielleicht können Sie mir helfen. In der theme.css habe ich auch ein paar Sachen geändert, hilft aber nix.

Grüße

Hi,
die Lösung per Backend/Customizer ... wäre natürlich am schnellsten - ob das geht, weiß ich nicht.
Da ich die Kombi Modulposition/ABSOLUTE beim Template ICE nicht kenne, kann ich hierzu nichts sagen.
Da man bei den Media-Queries schnell Flüchtigkeitsfehler machen kann, wage ich trotzdem mal einen Tipp.
Oft hilft eine andere Sichtweise und schon findet man seinen Fehler selbst!
sofern es nur darum geht, dass das Image die Größe anpasst, dann geht das bei einer absoluten Pixelangabe nicht, das geht nur bei %-Angaben. Trage hier mal %-Werte ein.
Vielleicht hilft dir die Bootstrap-Klasse ".img-responsive" weiter. Voraussetzung ist natürlich, dass Bootstrap im Backend aktiviert ist. Die Zuweisung einer Klasse zu deinem Element sollte im Backend möglich sein. Hierzu habe ich im Backend irgendwo entsprechende Einstellungen gesehen. Falls das nicht geht könnte man auch die HTML-Filter Funktion deaktivieren und die in Bootstrap hinterlegten CSS-Regeln direkt eintragen:
Hier die Bootstrap Responsive Regeln (Quelle W3C/CSS):
Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies max-width: 100%, height: auto, and display:block to the image:
Diese Regeln kannst du auch testweise in den Developer Tools eintragen und dann sehen, ob diese die gewünschte Wirkung zeigen.
Falls du deine Media-Queries noch mal prüfen möchtest, kannst du das mit geringem Aufwand auf simplecss.eu/ tun.
mfg
Christian

Hallo,
danke für die Rückmeldung.
Mir geht es nicht um irgendwelche Größen von Bildern, es geht mir darum, dass die Modulposition ABSOLUTE (ist rechts außerhalb des Headers beim ICE-Template) bei Tablets ausgeblendet werden, da sie beim Tablet den Header und die Main-Navi auf der rechten Seite etwas überdecken.

Ich möchte nur eine Anweisung, dass dieses Bild auf der Pos. ABSOLUTE bei einer Tablet-Auflösung nicht erscheint (display none)

Beim Ihrem ICE-Template sind standardmäßig nur ICONs auf der Pos. ABSOLUTE hinterlegt, die ja natürlich etwas kleiner sind und den Header-bereich nicht stören.
Mein Bild (wenn Sie so wollen ICON) ist aber 100px breit, sodass dieses Bild in der Tablet-Auflösung wie gesagt den Header und die NAVI teils überdeckt.

z.B. mit einer Media Query Anweisung (max-with...) für diese Postition bzw. Modulklassensuffix.


Gruß

Hallo,
fügen sie folgenden css code in ihre css/custom.css ein
Nun sollten die Icons bei weniger als 768px nicht mehr sichtbar sein

@media screen and (max-width: 768px) {
.absolute {display:none}
}

Hallo,
vielen Dank für die Rückantwort.
Habe die media Anweisung in die custom.css eingefügt.

Es werden die Icons auf dem iPad trotzdem angezeigt.

Siehe beigefügte Screenshots

Live Url bitte