Also, das ist im Grund ganz einfach, wenn man es erst einmal verstanden hat. Ich habe was länger dazu gebraucht zu kapieren, dass ein Teil in die Extra.css muss und ein anderer da wo ich es haben möchte. Der Thread von Brogan ist da auch nicht wirklich perfekt erklärt.
https://xenforo.com/community/resources/responsive-design.2193/
Also. die normale Einstellung die in die Extra.css gehört ist folgende:
Code:
/* Responsive Werbung - Klassen - Ende*/
/* Klassenname - Anfang */
<xen:if is="@enableResponsive">
@media (max-width:800px) {
.MeinBeispiel {
content:url(http://www.xyz.com/banner/xyz_fuer_800.jpg)
}
}
@media (max-width:610px) {
.MeinBeispiel {
content:url(http://www.www.xyz.com/banner/xyz_fuer_610.jpg)
}
}
@media (max-width:480px) {
.MeinBeispiel {
content:url(http://www.www.xyz.com/banner/xyz_fuer_480.jpg)
}
}
</xen:if>
/* Klassenname - Ende */
/* Responsive Werbung - Ende */
Dann hast Du erstmal den Inhalt festgelegt, der erscheint, wenn sich die Größe ändert. Hier in meinem Beispiel halt ein Werbebanner. Es kann auch anderer Inhalt sein, oder das eben der Inhalt ausgeblendet wird.
Nun muss man dann sein Templat anpassen, in meinem Fall eine der Werbepositionen.
Code:
/* Responsiver Bildwechsel - Anfang */
<xen:if is="@enableResponsive">
<a href='http://www.abcd.de/' class="MeinBeispiel" target='_blank'>
<img src='http://www.xyz.com/banner/xyz_fuer_fullwidth.jpg' border='0' alt=''></a>
</xen:if>
/* Responsiver Bildwechsel - Ende */
Damit ändert sich dann passend zur Browsergröße das angezeigte Bild, der Link funktioniert trotzdem.
Ich hoffe ich konnte ein wenig helfen.
