Labels Mobile CSS

  • Affected Version
    WoltLab Suite 5.3

    Hallo zusammen, ich habe auf meiner Seite https://www.lrde.de/feuerwehr-kelheim-stadt/ Labels eingebaut.

    CSS
    .badge.gifs {
        z-index: 2;
        bottom: 185px;
        font-size: 12px;
        left: 5px;
        top: -180px;
    }

    Nun sehen die Mobile "bescheiden" aus. Allerdings weiß ich, ehrlich gesagt nicht, wie ich das ordentlich abfangen soll. Die Labels von Woltlab passen sich ja Mobile auch von alleine an?

    Eingebaut im Template (Eigene Seite - Template) sieht es wie folgt aus:

    HTML
     <tr>
                   <td scope="row">
                      <p>10/1</p>
                      <p class="small">Kommandowagen (KdoW)</p>
                       <p class="small"><a href="#" class="jsTooltip button small jsStaticDialog" data-dialog-id="10-1 KdoW" title="10-1 KdoW - Infos">Mehr Infos</a></p>
                   </td>
                   <td><img src="{{ media="149" size="small" }}"><br/><span class=" badge label green gifs">Online</span></td>
                   <td><img class="gifbilder" src="{{ media="139" size="original" }}"></td>
                </tr>

    Sicher kann man das ohne das <br/> lösen, weiß nur leider auch dort nicht wie :/ Müsste das Label dann auf das Bild legen, aber keine Ahnung wie man das macht. Ja Google habe ich schon bemüht.

    Also 2 Fragen

    1. Wie Lege ich die Labels auf die Bilder ohne <br/>
    2. Wie fange ich das Mobile ordentlich ab?
  • Also die Labels auf die Bilder klappt inzwischen, aber leider noch immer nicht das sie Mobil angepasst werden

    CSS
    .badge.gifs {
        position: absolute;
        right:-20px;
        top:10px;
    }
    .item {
        position:relative;
        padding-top:20px;
        display:inline-block;
    }

    Auch sie via CSS @include screen-md-down auf width 50% zu reduzieren bringt keinen erfolg.
    Die Hauseigenen Labels, von Woltlab passen sich Mobile, augenscheinlich, selber an. Was also mache ich da falsch?

    HTML
    <td>
                      <div class="item">
                         <span class="badge label green gifs">Online</span>
                         <img src="{{ media="149" size="small" }}">
                      </div>
                   </td>
  • Habs:

    CSS
    .badge.gifs {
        position: absolute;
        right:-20px;
        top:10px;
    }
    .item {
        position:relative;
        padding-top:20px;
        display:inline-block;
    }
    HTML
     <td>
                      <div class="item">
                         <span class="badge label green gifs">Online</span>
                         <img src="{{ media="149" size="small" }}">
                      </div>
                   </td>

    Ich denke so kann man es lassen ;)

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!