Button nur mobile Endgeräte

aubers

Hallo,

ich möchte einen Button in meinen Header anbringen, der aber nur auf mobilen Endgeräten angezeigt wird. Den Button haben ich schon angebracht, dieser soll aber nur bis zu einem Breakpoint von 768px angezeigt werden. D.h auf größeren Bildschirmen soll er nicht vorhanden sein.

Hier der Code meiner header.php für den Button:

PHP

<?php    
                $breite = device-width;
                if (content >= 768){
                echo '<a style= "margin-left: 5px; float: left; width: 30px;" class="button black" href="#contet">Los gehts</a>';
                }
                
            ?>

Ich habe schon eniges probiert wie man sieht, aber es klappt leider noch nicht so wie ich es gerne hätte.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

am3

Sowas macht man mit css im Frontend, nicht mit PHP auf dem Server.

In etwa so:

HTML

<a  class="button black button-mobile" href="#contet">Los gehts</a>

CSS:

Code

.button-mobile {
      display:block;
}


@media (min-width:769px) {
    .button-mobile {
      display:none;
    }
}

aubers

Danke erstmal für die Lösungsvorschläge. Der Html-Code bewirkt allerdings das Gegenteil. Der Button ist auf großen Bildschirmen zu sehen und auf mobilen Endgeräten verschwindet er dann.

SirEctor

Nein, der Code von am3 sollte genau das bewirken, was du willst. Wenn es bei dir umgekehrt ist, hast du am Code etwas falsch übernommen.

aubers

Ich habe den Html-Code so wie er ist übernommen, allerdigns noch nicht den css-Code.

SirEctor

Ok, das erklärt es, denn erst der CSS-Code blendet entsprechend ein bzw. aus.

aubers

Jap das hat es erklärt. Der Button wird nur noch bei jeweiliger Auflösung angezeigt. Danke!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Button nur mobile Endgeräte

Jetzt mitmachen!