[3.3] @media problem
Verfasst: 17.07.2021 12:26
Hallo Ich bin gerade dabei etwas in Bezug auf eine meiner Extensions umzusetzen und komme einfach nicht weiter. Da dies etwas mit den css style Einstellungen zu tun hat denke ich das hier das richtige Themen Bereich ist. Ansonsten bitte ich einen Moderator freundlicherweise das zu verschieben.
Also folgendes Problem:
Ich hab für eine meiner Extension welches linksseitig einige boxen einbindet so eingerichtet das in dem rechten div Container eine Navy leiste eingeblendet wird.
Die Navi leiste hat zur Zeit zu testzwecken nur folgenden inhalt:
Dort wo dann test 123 steht soll später das hie hin:
Aber wie gesagt darum geht es nicht.
Der äussere divcontainer ist mit der class belegt
Die klasse forabg ist für padding und Farbgebung zuständig und wird über style spezifisch geladen.
Die class nav_sbl wird in der extension css wie folgt geladen:
Das soll dafür sorgen das diese Navibox also besagter div container nur ausgegeben wird wenn die pixel 900 und mehr sind. Das funktioniert auch soweit. wenn ich mit dem Browser das teste wird er bei 901+ angezeigt bei genau 900 ausgeblendet aber jetzt kommts bei 899 und weniger wieder eingeblendet. Und das ist leider der Punkt den ich nicht verstehe. weil die boxen links werden ja auch unter 900px ausgeblendet und bleiben auch ausgeblendet aber das will bei diesem einen Punkt nicht gelingen. Vielleicht weis hier einer Rat und hat nen Tip für mich.
Also folgendes Problem:
Ich hab für eine meiner Extension welches linksseitig einige boxen einbindet so eingerichtet das in dem rechten div Container eine Navy leiste eingeblendet wird.
Die Navi leiste hat zur Zeit zu testzwecken nur folgenden inhalt:
Code: Alles auswählen
<div class="nav_sbl forabg">
<div class="inner">
test 123
</div>
</div>Code: Alles auswählen
<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist sblnavlinks" >
{% set MICRODATA = 'itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope' %}
{% set navlink_position = 1 %}
{% EVENT overall_header_breadcrumbs_before %}
<li class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
{% if U_SITE_HOME %}
<span class="crumb" {{ MICRODATA }}><a itemprop="item" href="{{ U_SITE_HOME }}" data-navbar-reference="home"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span itemprop="name">{{ L_SITE_HOME }}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>
{% endif %}
{% EVENT overall_header_breadcrumb_prepend %}
<span class="crumb" {{ MICRODATA }}><a itemprop="item" href="{{ U_INDEX }}" accesskey="h" data-navbar-reference="index">{% if not U_SITE_HOME %}<i class="icon fa-home fa-fw"></i>{% endif %}<span itemprop="name">{{ L_INDEX }}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>
{% for navlink in navlinks %}
{% set NAVLINK_NAME = navlink.BREADCRUMB_NAME | default(navlink.FORUM_NAME) %}
{% set NAVLINK_LINK = navlink.U_BREADCRUMB | default(navlink.U_VIEW_FORUM) %}
{% EVENT overall_header_navlink_prepend %}
<span class="crumb" {{ MICRODATA }}{% if navlink.MICRODATA %} {{ navlink.MICRODATA }}{% endif %}><a itemprop="item" href="{{ NAVLINK_LINK }}"><span itemprop="name">{{ NAVLINK_NAME }}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>
{% EVENT overall_header_navlink_append %}
{% endfor %}
{% EVENT overall_header_breadcrumb_append %}
</li>
{% EVENT overall_header_breadcrumbs_after %}
<!-- IF U_MARK_FORUMS -->
<li class="rightside">
<a href="{U_MARK_FORUMS}" class="mark-read rightside" accesskey="m" data-ajax="mark_forums_read">{L_MARK_FORUMS_READ}</a>
</li>
<!-- ENDIF -->
</ul>Der äussere divcontainer ist mit der class belegt
nav_sbl forabgDie klasse forabg ist für padding und Farbgebung zuständig und wird über style spezifisch geladen.
Die class nav_sbl wird in der extension css wie folgt geladen:
Code: Alles auswählen
@media (max-width: 900px) {
.nav_sbl {
display: none;
}
}