"Telefon-button" Flate Responsive

Hallo Mandy,

am Desktop würde das wenig Sinn machen weil dort meistens kein Telefonprogramm /app installiert ist am mobilen Gerät hingegen schon.

Ich würde das so lösen das am Desktop die Telefonnummer und am mobilen Gerät ein verlinkter Button eingeblendet wird.

Schau mal auf meine SEITE dort habe ich das so gelöst (einfach das Browserfenster in der Breite verkleinern, so kannst du das beobachten).

Wenn du möchtest kann ich das heute Abend für deine Seite anpassen.

Hallo Mario

Das ist super!

So sollte das für die Seite http://www.restaurant-altstadtzimmer.de/ passen.

• Hier die Beispielseite.
• Am Desktop wird die Telefonnummer angezeigt.
• Ab einer Seitenbreite von 879 Pixeln wird diese ausgeblendet und dafür ein klickbarer Button eingeblendet.
• Immer wenn kein Platz im Logo-Bereich ist springt der Button nach unten in den Header. Sobald wieder Platz ist blenden wir ihn wieder dort ein.

Einstellungen > CSS

<style>
/***** FON *****/
.fon {
position: fixed;
z-index:6100;
top:15px;
right:35px;
font-size:19px;
color: #000000;
font-weight: 900;
}
@media (max-width: 879px) {
.fon {
display: none;
}}

.fon-mobil {
position: fixed;
z-index:6100;
top:5px;
right:30px;
}
@media (min-width: 879px) {
.fon-mobil {
display: none;
}}
@media (max-width: 550px) {
.fon-mobil {
top:50px;
right:0px;
}}
@media (max-width: 490px) {
.fon-mobil {
top:5px;
right:120px;
}}
@media (max-width: 320px) {
.fon-mobil {
top:50px;
right:0;
}}
</style>

Am Ende der Seite Widget > Quelltext, und diesen auf alle Seiten vererben.

 <div class="fon">☏ 012345/6789</div>
<div class="fon-mobil"><a href="tel:+49123456789"><img src="https://www.zella.de/bilder/button/telefon.jpg" alt="telefon" /></a></div>

HINWEIS:

• Das Ergebnis ist in der ZP-Live-Vorschau nicht zu sehen. In der Browser-Vorschau schon.
• Das Widget Quelltext welches am Ende der Seite eingefügt wurde ist nur über die Listenansecht "F8" zu öffnen.

Bitte für die Zukunft:
Für Mitleser, wie mich, ist es besser neue Themen mit passender Überschrift als neue Beiträge zu schreiben.

Hallo,

warum nutzen Sie für die Telefonnummer nicht einfach das neue Widget "Reservierungs-Popup"?